CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcol
Afrgun
Afrgun

Reputation: 313

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?

Upvotes: 1

Views: 85

Answers (2)

Vault Dweller
Vault Dweller

Reputation: 135

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

Upvotes: 0

ketan
ketan

Reputation: 19341

There are two option Either put col-md-7 up in html like:

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

Or use position absolute for mobile device like:

.row {
    position: relative;
}
.col-md-5 {
    position: absolute;
    top: 20px;
}
.col-md-7 {
    position: absolute;
    top: 0;
}
<div class="row">
   <div class="col-md-5">col 5 </div> 
   <div class="col-md-7">col 7 </div>
</div>

Hope it helps.

Upvotes: 1

Related Questions