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
Post a Comment