Bootstrap Layout Code Question

This question refers to a single block of code to be placed in something like the define_main_page.php.


I'm just not getting my head wrapped around what layout and CSS coding will allow me to do what I want. Maybe I've just looked at it for too long. Maybe trying to work from three-column when I only need two...


What I am trying to create is like the example at https://css-tricks.com/snippets/css/...x/#aa-examples but with no Aside 2


Scroll down to

Quote:

---

Let’s try something even better by playing with flex items flexibility! What about a mobile-first 3-columns layout with full-width header and footer. And independent from source order.

---

]
and the CSS coding starting with

Code:

---

.wrapper {  display: flex;
  flex-flow: row wrap;
}


/* We tell all items to be 100% width, via flex-basis */


.wrapper > * {
  flex: 1 100%;
}

---

Scrolling on down, you'll see the image of the code done with a Header, Aside 1, Main (blue background), Aside 2, and Footer.


My desired layout for desktop and portrait mobile/tablet is to have:
Header - width 100%
Aside 1 - width 40% then Main - width 60%
Aside 2 - width 30% then Main2 - width 70%
Footer - width 100%


For mobile
Header
Aside 1
Main 1
Aside 2
Main 2
Footer


Aside 1 is destined to be a slider/carousel (don't know which yet but open to suggestions for this scenario)


If someone could munge the CSS on that page to work with two- versus three-column I would appreciate it.

THANX in advance

The link you posted heads to a 404 (page not found).

https://css-tricks.com/snippets/css/...x/#aa-examples

Click on Examples to open

Scroll down to "Let's try something better....

That's (unfortunately) over-and-above what the Bootstrap template's base layout uses for its structuring. The sideboxes are rendered as viewport-specific div's rather than using aside's.

so, I should try to stick with bootstrap's flex-box and column

Quote:

---

Originally Posted by dbltoe

so, I should try to stick with bootstrap's flex-box and column

---

Unless you want to do some major redesign!:smile: