A guide to designing a responsive flexbox layout with various columns and rows

I need help designing a container that is responsive for both mobile and desktop, resembling the layout shown in this image. The initial HTML structure is as follows, but I can modify it by adding elements or classes if necessary.

<div class="container">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
</div>

After attempting to create this layout, my mobile version ended up with boxes 2 and 3 appearing swapped on the webpage. Ideally, I would like them to be displayed vertically and sequentially from 1 to 3. I considered using a container for boxes 2 and 3 so that I could utilize flex-direction: column-reverse in the media query. However, this solution caused issues with the desktop view since I also needed a container for boxes 1 and 3 in order to arrange them in a column and set the flex-basis. Any suggestions on alternative approaches would be greatly appreciated.

htmlcssflexbox

Answer №1

If you want to optimize your layout for both desktop and mobile views, consider organizing your first two divs within a container with a flex-direction of row for desktop, then switching it to column at the mobile breakpoint (set at 600px):

.main-container {
  display:flex;
  flex-direction:column;
}

.row-flex {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

.section {
  border:3px solid #000;
  width:300px;
  height:300px;
  margin-bottom:10px;
}

.small-section {
  width:200px;
  height:200px;
 }

@media only screen and (max-width: 600px) {
  .row-flex {
    flex-direction:column;
  }
  
  .small-section {
    width:300px;
    height:300px;
  }
}
<div class="main-container">
  <div class="row-flex">
    <div class="section box">1</div>
    <div class="small-section box">2</div>
  </div>
  <div class="section box">3</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a hover state for a CSS class seems straightforward, but I'm finding it a bit tricky

I am looking to customize my inline menu by changing the last menu item to a different colored box with unique text. I have successfully applied a custom style using the #navbar a.blogbox class, but I am struggling to figure out how to change the hover s ...

css

Tips for creating a custom Menu with content overflow in a single direction

What is the goal of this task? I have developed a custom Menu in my application with 8 options. There is a need to dynamically disable certain menu options based on specific conditions (e.g. disabling the last 4 options). When a user hovers over a disable ...

javascripthtmlcssoverflow

When arranging elements using the @media feature in CSS grid, a phantom element seems to mysteriously appear

Apologies for the extensive uploads, I'm not sure how else to proceed. I'm attempting to rearrange my grid layout at a specific width so that the paragraphs repeat with the images. However, I'm encountering a random space between 1 and 2 whe ...

htmlcssfrontendcss-grid

PHP displays an HTML table with error messages

I recently created a table by extracting data from a database using a loop to retrieve all the necessary information. However, I encountered an error after calling a javascript function in the HTML onClick event of an input element. The function itself wor ...

phphtmlhtml-tableecho

The antithesis of a feature that encapsulates a chosen area with a span

Hi everyone, I have a function that works as follows: define(function () { 'use strict'; var sel, range, span; return function () { span = document.createElement("span"); span.className = 'highlight'; if (window.ge ...

javascriptjqueryhtmlcss

Angular error message: Trying to access the property 'name' of an undefined object leads to a TypeError

I'm having trouble phrasing this question differently, but I am seeking assistance in comprehending how to address this issue. The error message I am encountering is as follows: TypeError: _co.create is not a function TypeError: Cannot read property ...

htmlangulartypescript

Issue with Chrome when using angled CSS gradient backgrounds

I'm encountering a problem with a CSS gradient background on a div that is set to 100% width and height. This issue only seems to be happening in Chrome. I have some content placed over the div, and when I hover over links within that div, the gradien ...

google-chromecss

Tips for showcasing array values on an HTML webpage

Having trouble displaying the "latitude" and "longitude" in html. I attempted to use a forEach loop, but it was not successful https://i.sstatic.net/FnLMP.png this.otherService.getList().subscribe( (response: any) => { this.atm = response; H ...

htmlangularangular8

Problem with resizing in CSS and jQuery

I need help creating a chatbox that can be resized. I've almost got it, but the bottom part of the chatbox detaches when I resize it. Also, I'm having trouble making the userList a fixed size that won't be affected by resizing. Check out th ...

javascriptjquerycss

Include a picture and a division element within the dropdown element

I've encountered a few challenges while trying to personalize a profile dropdown component using Semantic and React. First, I am facing an issue where my application crashes when I attempt to place a div inside the Dropdown.Menu with the error message ...

cssreactjsdrop-down-menusemantic-ui

Tips for querying multiple elements that share a common ID and verifying if the input has been modified

I have a series of text inputs that share a common id prefix but differ slightly at the end. Whenever a user enters text in any of these input fields, I want to trigger a function. Currently, I have this functionality implemented with the following code: ...

javascriptjqueryhtmldom

`Can you guide me on the proper path for designing this website layout?`

As I embark on creating my first website, I have a specific vision in mind. I want the full display on a computer screen to show all the information and links without any need for scrolling. However, when the window is resized to smaller screens, I would l ...

htmlcss

How can I use Selenium in combination with Python to retrieve the visible text of a selected radio button or checkbox on a webpage?

I am currently working on processing a form where I need to extract the text values of all checked radio buttons. Each line item will have one radio button checked. Here is an example of the HTML structure for a checked radio button: <div style="white ...

pythonhtmlformsseleniumradio-button

`Nginx with a touch of material design`

Currently, I'm in the process of implementing material design UI on a functioning web application. The application utilizes Nginx, PHP, and PostgreSQL. While I have proficiency in PHP and PostgreSQL to ensure the functionality (code composed in notepa ...

htmlcssmaterial-design

Creating a personalized webview in Appgyver Steroids: A step-by-step guide

I am planning to design the following layout: The main screen will display a web page There should be a sidebar on the left side The sidebar can be accessed by clicking on a 'hamburger' icon in the app header Currently, my app structure look ...

javascriptangularjshtmlsteroids

PHP function with JSON response encountered an error during the AJAX call

I am currently working on creating a News Ticker that utilizes PHP, Javascript, and AJAX. The first step involved creating a PHP function called getFeed(), which gathers data from various news websites into an Array. This data is then returned in JSON form ...

javascriptphpjqueryhtmlajax

[Vue alert]: Issue in created function: "TypeError: Unable to assign value to undefined property"

I'm currently in the process of developing a VueJS application where I have implemented a child component called Child.vue that receives data from its parent. Child.vue export default{ props:['info'], data: function(){ ...

javascripthtmlvue.jsvuejs2vue-component

Display an echo within a DIV

Encountering a frustrating issue and seeking assistance. The problem seems to involve loading a page into a DIV. I've created a form for updating database information in a single file with PHP code, loaded into a DIV. When accessing the page directly ...

phphtmlecho

What could be causing the HTML and CSS to not show the background image?

Hey, I'm new to html and css and I'm having trouble getting a background image to show up on my website. All I see is "first website" in the corner but the image isn't displaying. Here's the code I have: * { margin: 0; padding: 0 ...

htmlcss

Mastering the use of SVG icons in Angular 4+: A comprehensive guide

I have an icon.svg file with a collection of icons that I would like to use in my app, similar to how we display material icons. Does anyone have any ideas on how to include the file in the app and use these icons? I've tried looking for solutions a ...

cssangularsvg