css - Collapse 3 columns on mobile device -
i have bootstrap layout so:
<div class="container"> <div class="row"> <div class="col-sm-4 top-col-left"> <h4>24 hour high</h4> <h1>$7.88</h1> </div> <div class="col-sm-4 top-col-center"> <h4>24 hour low</h4> <h1>$1.88</h1> </div> <div class="col-sm-4 top-col-right"> <h4>24 hour change</h4> <h1>$2.88</h1> </div> </div> </div>
when viewed on mobile device layout become 3 rows of 1 column. possible display 1 row of 2 columns , 1 row of 1 column instead?
this become 2 rows 2 , 1 columns respectively on xs
(<768px) devices
<div class="container"> <div class="row"> <div class="col-sm-4 col-xs-6 top-col-left"> <h4>24 hour high</h4> <h1>$7.88</h1> </div> <div class="col-sm-4 col-xs-6 top-col-center"> <h4>24 hour low</h4> <h1>$1.88</h1> </div> <div class="col-sm-4 col-xs-12 top-col-right"> <h4>24 hour change</h4> <h1>$2.88</h1> </div> </div> </div>
Comments
Post a Comment