html - It's possible to change the order of bootstrap col div in responsive? -


i have 3 col-md-4(1) col-md-4(2) col-md-4(3) in col-md-12. in mobile or tablet. want show middle col-md-4(2) first , col-md-4(1) col-md-4(3). how respect bootstrap?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous">    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script>    <div class="container">    <div class="row">      <div class="col-md-12">        <div class="col-md-4">            <p>abcd</p>        </div>        <div class="col-md-4">          <p>xyzs</p>        </div>        <div class="col-md-4">           <p>mnop</p>        </div>      </div>    </div>  </div>

reorder first 2 columns , use col-xx-push , col-xx-pull reposition on larger screens:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">      <div class="container">    <div class="row">      <div class="col-md-12">        <div class="col-md-4 col-md-push-4">          <p>column 2</p>        </div>        <div class="col-md-4 col-md-pull-4">          <p>column 1</p>        </div>        <div class="col-md-4">          <p>column 3</p>        </div>      </div>    </div>  </div>

you can not use push , pull when columns full width (in case, below md) must have them in correct order in dom start with.


Comments

Popular posts from this blog

Load Balancing in Bluemix using custom domain and DNS SRV records -

oracle - pls-00402 alias required in select list of cursor to avoid duplicate column names -

python - Consider setting $PYTHONHOME to <prefix>[:<exec_prefix>] error -