CSS , JQUERY and COLUMNS

Christopher Gore
Christopher Gore used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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
Prasadh BaapaatWeb Designer & Developer

Commented:
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?
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

Mikkel SandbergWeb Developer
Commented:
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

Christopher GoreEnterprise Solutions Architect

Author

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.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome
since CSS Grid works in all the browsers
Interested to know what browsers Bootstrap does not work in?
Christopher GoreEnterprise Solutions Architect

Author

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.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Ok but last I checked grid and IE do not play nice.
Mikkel SandbergWeb Developer

Commented:
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.
Christopher GoreEnterprise Solutions Architect

Author

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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial