I have this html code:
<div> <div> <img src="img"> <div> Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh </div> </div> <div> <img src="img"> <div> Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh </div> </div> <div> <img src="img"> <div> Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh </div> </div> <div> <img src="img"> <div> Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh </div> </div> </div>I would like these columns to go to new rows two by two, except on mobile phones. Is that possible?
Thanks
23 Answers
You can use something like this:
<div> <divcol-xs-12 col-sm-6 col-md-3> Content </div> <divcol-xs-12 col-sm-6 col-md-3> Content </div>
</div>If I understand correctly you want output
1 2 3 4 on medium screen size,
1 2
3 4 on small screen size and
1
2
3
4 on extra small screen size
You can accomplish that using col-xs-12, col-sm-6 and col-md-3 classes like code below.
<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> </div>
</div>Here's a link to JSFiddle.
Here, look at this. You'll have 4 columns for PC, 2 columns for small devices, and 1 column for extra small devices like mobile.
<link href="" rel="stylesheet"/> <div> <div> <img src="img"> <div> Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh </div> </div> <div> <img src="img"> <div> Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh </div> </div> <div> <img src="img"> <div> Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh </div> </div> <div> <img src="img"> <div> Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh </div> </div> </div>For better understanding how this works, look at bootstrap's documentation -
