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 in CSS by Edureka
• 9,940 points
11 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 in CSS by Edureka
• 9,540 points
108 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 in CSS by Edureka
• 9,940 points
19 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 in CSS by Edureka
• 9,940 points
23 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 in CSS by Edureka
• 9,940 points
15 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 in CSS by Edureka
• 9,540 points
37 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 in Others by Aditya
• 7,300 points
620 views
0 votes
1 answer
0 votes
1 answer

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

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

answered Jun 10 in CSS by Edureka
• 9,540 points
54 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP