CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Fernanda Luiz Pinto
Fernanda Luiz Pinto

Reputation: 103

Bootstrap columns in mobile version

I'm using bootstrap to make a website, but it's something is wrong.

I want to make 2 rows and 3 columns and when the screen changes to mobile, I want it to be 3 rows and 2 columns.

Desktop

|A|   |B|   |C| 
|D|   |E|   |F|

Mobile

|A|  |B|
|C|  |D|
|E|  |F|

I used the code below to do it, but the images don't stay like I want it to.

<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
</div>

The images stay like this

|A| |B|
    |C|
|D| |E|
|F|

Thanks in advance!

Upvotes: 10

Views: 47066

Answers (5)

Chamara Indrajith
Chamara Indrajith

Reputation: 729

I am using Stacked to Horizontal & Mix and Match in Boostrap.

1. Stacked to Horizontal

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Desktop View: enter image description here Mobile View:

enter image description here

2. Mix and Match

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Desktop View: enter image description here

Mobile View:

enter image description here

Code from:

Upvotes: 5

Dmitri
Dmitri

Reputation: 776

4 columns on desktop and 2 columns on mobile:

<div class="row">
<div class="col-sm-3 col-6 m-auto"></div>
<div class="col-sm-3 col-6 m-auto"></div>
<div class="col-sm-3 col-6 m-auto"></div>
<div class="col-sm-3 col-6 m-auto"></div>
</div>

May need to add class fluid to image object to keep the image responsive within div.

Upvotes: 11

JasParkety
JasParkety

Reputation: 151

Even though this is old maybe it helps some of you.

My way is more code than probably necessary but I couldn't came up with a bootstrap grid system solution that provides different column and row changes in combination with screen width changes.

So lets start:

  • Switching to .scss and implement bootstrap responsive functions
  • Include a parent div which acts as a view toggle container for your bootstrap gird system
  • Usage of display: none !important and display: inline !important for the divs
  • A hint, set the width of the image class to max-widht: 100%;, it will force the images to take as much place as they can without exceeding its parent width; unless you want different unique sizes of course

.scss: (check your bootstrap css version )

$stageZero: 540px;
$stageOneLower: 719px;
$stageOneHigher: 720px;
$stageTwoLower: 959px;
$stageTwoHigher: 960px;
$stageThree: 1140px;

@mixin stage00 {
  @media (max-width: $stageZero) { @content; }
}

@mixin stage01 {
  @media (min-width:$stageOneLower) and (max-width:$stageOneHigher)  { @content; }
}

@mixin stage02 {
  @media (min-width:$stageTwoLower) and (max-width:$stageTwoHigher) { @content; }
}

@mixin stage03 {
  @media (min-width: $stageThree) { @content; }
}
.mobileViewToggle {
    @include stage00 {display: inline !important;}
    @include stage01 {display: none !important;}
    @include stage02 {display: none !important;}
    @include stage03 {display: none !important;}
}
.desktopViewToggle {
    @include stage00 {display: none !important;}
    @include stage01 {display: inline !important;}
    @include stage02 {display: inline !important;}
    @include stage03 {display: inline !important;}
}

.html:

<div class="mobileViewToggle">
    < Bootstrap Grid Code with xs prefix, e.g. col-xs-4>
</div>

<div class="desktopViewToggle">
    < Bootstrap Grid Code with sm prefix, e.g. col-sm-6>
</div>

Upvotes: 0

Eric G
Eric G

Reputation: 2617

I have run into this problem before. The issue has been that my content is different heights. Because Bootstrap uses floats to arrange it's columns your column C cannot float all the way to the left if your column A is taller than column B.

I have included a link to a codepen so you can see it in action. The top two rows are exactly your code above while the bottom two rows show a div with a different height than the other divs.

http://codepen.io/egerrard/pen/PGRQYK

The solution for you will be to set the height of your divs to the max height for all your content. Something like 

.maxHeightDiv {
    height: 200px;
}

You'll probably have to set heights for different window widths. It can be a little annoying but this is a caveat of the bootstrap float system.

Upvotes: 5

Milind
Milind

Reputation: 5112

You can use the below class as shown...

  1. col-xs-2 - will be two columns only on xs devices-(mobile)
  2. col-md-3 - will be 3 columns on all devices other the mobile

<div class="row"> <div class="col-xs-2 col-md-3">Content</div> .... </div> You cannot change the rows however without using js. Moreover,on mobile,does it really matters... ?

Upvotes: -2

Related Questions