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

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -