Bootstrap 3 pull and push issue -
i have problem pull , push, think it's because of combination offset? want do: (i can't post image because of lack of reputation...) http://i.stack.imgur.com/ypokv.png
after first problems , searching i've found out better approach mobile first (i know) i've changed layout accordingly. bigger browsers need second , third cells switch position.
so first cell on bigger screens has 2 offset , size of 4. other 2 should have size of 4 , after switch, 1 on next line should have offset of 2.
i've tried number combinations think of not working. please help:/ 1 of solutions:
<div class="col-xs-12 col-md-offset-2 col-md-4"></div> <div class="col-xs-12 col-md-push-6 col-md-4"></div> <div class="col-xs-12 col-md-4 col-md-pull-6"></div>
i believe following achieves require using nested grid row:
<div class="row"> <div class="col-xs-12 col-md-offset-2 col-md-4"> <div class="row"> <div class="col-xs-12" style="background-color:gray;">aaaa</div> </div> <div class="row"> <div class="col-xs-12" style="background-color:green;">bbbb</div> </div> </div> <div class="col-xs-12 col-md-4" style="background-color:lavender;">cccc</div> </div>
both listings on left using offset 2 on bigger screens , retain size of 4 (as right column). on smaller screen sizes jump full row width while keeping desired order.
Comments
Post a Comment