html - Hide and move divs depending on device in Bootstrap -
i using bootstrap create layout displays desktop, tablet , mobile. trying achieve illustrated here:
to have created 3 divs:
<div class="row"> <div class="col-md-3">text</div> <div class="col-md-3">text</div> <div class="col-md-3">text</div> </div>
the middle div hidden on tablet view, last div fall below first on mobile view.
using have, 3 divs display correctly on desktop, in tablet & mobile 3 collapse vertically.
is there easy way bootstrap, or must write own css media queries?
to hide middle div, use utilities class described in bootstrap:
bootstrap 3
use visible-lg
class hide div on tablets , phones.
i suggest use col-sm , col-xs collapse or not div depending width (learn more grid system):
<div class="row"> <div class="col-sm-3 col-xs-9">text</div> <div class="col-sm-3 visible-lg">text</div> <div class="col-sm-3 col-xs-9">text</div> </div>
see fiddle
bootstrap 2.3
use visible-desktop
class hide div on tablets , phones.
Comments
Post a Comment