Using Flex CSS and Bootstrap for a responsive layout

0 votes

I've been playing with fully responsive layouts for a while now across laptop, tablet, and mobile phone sizes, but the layout below is giving me difficulties.

I was using a bootstrap grid layout, but since it has two columns, the second one slides below the main content section on the left when the width decreases. As shown in the screen captures below, I wish to divide everything up.

This is the starting view:

enter image description here

This is what I want to happen:

enter image description here

This would be the mobile phone view:

enter image description here

As a result, when testing, the broad view will be condensed, and I want it to switch to the mobile view, where the top sidebar extends above the main content and is the same width as the main content, and the bottom sidebar does the same for the bottom.

Although it is simple to place both sidebars at the bottom, I want to investigate the potential of dividing them up.

I'm using bootstrap5+, flexbox, CSS3, and CSS3 without any plugins or javascript for testing.

Jun 30, 2022 in CSS by Edureka
• 13,620 points
613 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
1 answer

How to create material design input form using css and bootstrap?

Try with this code. HTML: <div class="main_div"> ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
2,426 views
0 votes
0 answers

How can I vertically center a div element for all browsers using CSS?

I want to center a div vertically with CSS. ...READ MORE

Jun 22, 2022 in CSS by Edureka
• 13,620 points
436 views
0 votes
0 answers

How to make a back-to-top button using CSS and HTML only?

I want to scroll down and up ...READ MORE

Jun 30, 2022 in CSS by Edureka
• 13,620 points
482 views
0 votes
0 answers

Using CSS for a fade-in effect on page load

Can a text paragraph fade in on ...READ MORE

Jul 29, 2022 in CSS by Edureka
• 13,620 points
1,049 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points
588 views
0 votes
1 answer
0 votes
1 answer

Font Awesome not working, icons showing as squares

You must have 2 classes, the fa ...READ MORE

answered Feb 22, 2022 in Others by Aditya
• 7,680 points
6,516 views
0 votes
1 answer

Bootstrap throws Uncaught Error: Bootstrap's JavaScript requires jQuery

Try this Change the order of files it ...READ MORE

answered Jun 10, 2022 in JQuery by gaurav
• 23,260 points
602 views
0 votes
1 answer

Why vh works and % doesn't? (height css)

The height of an element, by default, ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
1,722 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP