html - Bootstrap - how to make a single div content not responsive? -

html - Bootstrap - how to make a single div content not responsive? -

i'm learning how build web pages based on bootstrap i'm having problem trying maintain 2 elements side side on smaller screens. in particular, have 6 elements (a, b, c, d, e, f) , want accomplish next result:

desktop screen: b c d e f

mobile screen: b c d e f

i have no problems a, b, e , f (i've used class col-xs-*) i'm not able find way maintain c , d side side.

can help me? :)

ps code similar this:

<div class="content"> <div class="row"> <div class="col-xs-2">a</div> <div class="col-xs-2">b</div> </div> <div class="row"> <div>c</div> <div>d</div> </div> <div class="row"> <div class="col-xs-2">e</div> <div class="col-xs-2">f</div> </div> </div>

you need specify column widths @ each breakpoint:

<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6">a</div> <div class="col-xs-12 col-sm-6">b</div> <div class="col-xs-6">c</div> <div class="col-xs-6">d</div> <div class="col-xs-12 col-sm-6">e</div> <div class="col-xs-12 col-sm-6">f</div> </div> </div>

to utilize in code, it's this:

<div class="content"> <div class="row"> <div class="col-xs-12 col-sm-6">a</div> <div class="col-xs-12 col-sm-6">b</div> </div> <div class="row"> <div class="col-xs-6">c</div> <div class="col-xs-6">d</div> </div> <div class="row"> <div class="col-xs-12 col-sm-6">e</div> <div class="col-xs-12 col-sm-6">f</div> </div> </div>

html css twitter-bootstrap responsive-design twitter-bootstrap-3