twitter-bootstrap


stacking order in bootstrap


I have a problem with the stacking order in bootstrap. I realise that similar questions have been asked, and that its push and pull that should be used. But i just can not get it to work.
this is the code im using:
<div class="row">
<div class="col-xs-12 col-sm-6"> a </div>
<div class="col-xs-12"> b </div>
<div class="col-xs-12 col-sm-6"> c </div>
</div>
What i want is for a, b and c to be under eachother in order in mobile view, but in desktop view a and c should be next to eachoter and b below them.
a
b
c
a c
b
It's not exactly the same thing but it's approaching...
Bootply : http://www.bootply.com/D5AmKsc6aT
HTML:
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="row">
<div class="col-xs-12">A</div>
<div class="col-xs-12">B</div>
</div>
</div>
<div class="col-xs-12 col-md-6">C</div>
</div>
There's not much html required, it's just a 2 column layout each column is 50%. You don't need nested columns. You don't need to specify -- in an un-nested structure the col-xs-12 -- the content 100% when it's below your column class min-width.
DEMO: http://jsbin.com/paqoke/2/edit
<div class="row">
<div class="col-sm-6">
<p>A</p>
<p>B</p>
</div><!--/.col-*-6-->
<div class="col-sm-6">
C
</div><!--/.col-*-6-->
</div><!--/.row-->
</div><!--/.container-->
Sadly, push/pull won't help you here, as you can't jump over a column. You'll have to duplicate some of your content (I've duped col-c in this example) and use bootstraps hidden-xs and visible-xs helper classes to show/hide on appropriate devices.
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success"> a </div>
<div class="hidden-xs col-sm-6 bg-info"> c desktop</div>
<div class="col-xs-12 bg-warning"> b </div>
<div class="visible-xs col-xs-12 bg-info"> c mobile</div>
</div>
</div>
DEMO: http://www.bootply.com/SW2ygwLVNY
Also worth noting, you don't have to declare col-xs-12 if you've declared another grid-class, as it's the default xs width. (i.e. col-sm-6 defaults to col-xs-12 when on xs).

Related Links

Bootstrap: glyphicon-triangle-bottom not displaying
bootstrap type ahead not working
Why there are no bootstrap support for handling grid system breakpoint events ?
Helper class for text that will go on a dark background
How to Align Ingredients Form In Bootstrap [Inventory System]
Bootstrap alert will not show
Change div rows order in bootstrap 3
Bootstrap navbar-collapse not dropping on mobile
Inline form vertical spacing issue
Embedded video shows a totally other video
Customizing spree e-commerce view
bower install bootstrap-saas giving ENOTFOUND error
Bootstrap button not working in Internet Explorer
Hide Bootsrap modal in mobile
Bootstrap Datetimepicker issue occured
Combine 2 streams

Categories

HOME
drupal
gulp
youtube-api
twitter-bootstrap
botframework
ldap
mysqli
pelican
segmentation-fault
token
jpql
mamp
urllib2
decoding
jinja2
web-parts
geography
google-street-view
beacon
conditional-formatting
xforms
keystone
bug-reporting
rndis
hololens
connection-pooling
bootstrap-accordion
core-animation
priority-queue
scalatest
orgchart
stack-trace
ng2-bootstrap
jsonapi-resources
mootools
android-geofence
gstreamer-1.0
stdin
lex
mockserver
sknode
vpython
head
chrome-custom-tabs
spring-ide
confluent
evaluation
ear
perldoc
intermediate-language
dynatable
catalyst
scanf
vertex-shader
optional-parameters
universe
class-design
rowname
particle-system
mrunit
radar-chart
clique
cexception
datamodel
ewam
jcomponent
producer-consumer
lytro
android-togglebutton
exchange-server-2007
android-networking
vectordrawable
grails-3.0.9
opennebula
valdr-bean-validation
firebase-tools
applinks
optimistic-locking
system.io.packaging
famous-engine
ios-enterprise
time-frequency
switchpreference
nspopupbutton
webshim
code-smell
elixir-framework
logo-lang
node-amqp
gwt2
reference-manual
ncml
rfc822
winrt-async
github-archive
facebook-winjs-sdk
soapexception
peoplepicker
youtube.net-api
nbehave
google-local-search
linq-to-mysql
datadude
zend-acl

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile