Search code examples
htmlcsstwitter-bootstrapcol

custom position column bootstrap

i have a problem with column bootstrap when display on mobile device,

so this example :

<div class="row">
   <div class="col-md-5"> </div> 
   <div class="col-md-7"> </div>
</div>

when display on mobile, col-md-5 will appear at the top and col-md-7 will appear at the bottom.

but i want, col-md-5 appear bellow and col-md-7 appear at the top.

Any suggestion for me?

Solution

  • Not sure if this is correct practice but you could use the "hidden" or "visible" classes

    'hidden':

    <div class="row">
   <div class="col-md-5 hidden-xs hidden-sm">content abc </div> 
   <div class="col-md-7"> </div>
   <div class="col-md-5 hidden-md hidden-lg">content abc </div>
</div>

    or 'visible':

    <div class="row">
   <div class="col-md-5 visible-md visible-lg">content abc </div> 
   <div class="col-md-7"> </div>
   <div class="col-md-5 visible-xs visible-sm">content abc </div>
</div>

    Here is a link for hidden and visible classes in bootstrap: Bootstrap responsive utilities