• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 178
  • Last Modified:

CSS , JQUERY and COLUMNS

I'm trying to get some columns to fit on all devices (div columns).  I need something like this:

1 2
   3
   4

I would like 2,3 and 4 to wrap under 1 vertically when it is shown in a mobile browser.
0
Christopher Gore
Asked:
Christopher Gore
  • 4
  • 3
  • 2
  • +1
2 Solutions
 
Julian HansenCommented:
What framework are you using?
Bootstrap will do this with its grid layout - or should.

I don't understand the
1 2
   3
   4

Is that what it must look like on desktop or on mobile
0
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
ok, got the display you want on a mobile... what about the display on a desktop?
will it be

1  2
3  4
 
or anything else?

and as Julian asked, what will you be using? bootstrap?
0
 
Julian HansenCommented:
Assuming you want exactly this
1 2
   3
   4

To go to
1
2
3
4

You could do it with bootstrap like this
HTML (assumes Bootstrap)
  <div class="row">
    <div class="col-lg-9 col-md-6 col-sm-12">1. This is the main column on the left</div>
    <div class="col-lg-3 col-md-6 col-sm-12">2. This is the right hand column</div>
    <div class="col-lg-3 col-md-6 col-lg-offset-9 col-md-offset-6 col-sm-12">3. Second row in right column</div>
    <div class="col-lg-3 col-md-6 col-lg-offset-9 col-md-offset-6 col-sm-12">4. Second row in right column</div>
  </div>

Open in new window

Working sample here
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Mikkel SandbergFront End DeveloperCommented:
In case you're not using Bootstrap, here's some CSS (assuming your markup is similar to Julian's example):
#col1, #col2 {
  float: left;
}

#col3, #col4 {
  clear: left;
  margin-left: /* width of col1 goes here */; 
}

@media only screen and (max-width: 768px) {
  #col1, #col2 {
    float: none;
  }
}

Open in new window


Or, if you want col1 to be fixed as you scroll, then it's even easier:
#col1 {
  position: fixed;
}

#col2, #col3, #col4 {
  margin-left: /* width of col1 goes here */;
}

Open in new window

0
 
Christopher GoreSolutions ArchitectAuthor Commented:
Thanks for the help guys.  I thought I would follow up that now this type of use is even easier with CSS Grid instead of bootstrap since CSS Grid works in all the browsers.
0
 
Julian HansenCommented:
You are welcome
since CSS Grid works in all the browsers
Interested to know what browsers Bootstrap does not work in?
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
Bootstrap works well too.  Just a little faster with CSS Grid.  I also like the ability to do two dimensional in CSS Grid now.
0
 
Julian HansenCommented:
Ok but last I checked grid and IE do not play nice.
0
 
Mikkel SandbergFront End DeveloperCommented:
Can I Use is a good resource for browser support: http://caniuse.com/#search=grid
So yeah, looks like IE has iffy support for grid.
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
Yeah, that is funny though because CSS Grid was born out of IE.  They used it in Win 10 for their Start Page.  All the other browsers just caught up about 2 months ago.  IE is a little behind, but they will get there.  On another note, Firefox has the best investigator for now for CSS Grid.  It actually shows you all the grids on inspection.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now