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

Popular posts from this blog

node.js - Node js - Trying to send POST request, but it is not loading javascript content -

javascript - Replicate keyboard event with html button -

javascript - Web audio api 5.1 surround example not working in firefox -