Is it possible to create this mobile vs desktop layout in HTML/CSS?

user_1025013 0
Viewed 188

I have a bit of a dilemma where I want to create different layouts for web versus mobile. It will use the same sections of the page but just in different order for web versus mobile. Here is what I mean. Do you think this is possible to create?

Desktop Version: 

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>E</td>
    <td>C</td>
  </tr>
  <tr>
    <td>F</td>
    <td>D</td>
  </tr>
</table>

Mobile Version:

<table>
  <tr>
    <td>A</td>
  </tr>
  <tr>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
  </tr>
  <tr>
    <td>E</td>
  </tr>
  <tr>
    <td>F</td>
  </tr>
</table>

Notice how left column in desktop version has A but the right column has B C D.

Is this possible?

UPDATE: Apologies, I didn't mean to use a table but just to show the content of my question. The two answers provided below are on the right step but I forgot to mention how would this work with dynamic content that isn't the same height? For example, let's see C was some text that was short for some pages while long for other pages. How would I go about using grid-template-areas for dynamic content that varied in height?

web responsive css html
2 Answers

Well as already mentioned you can do this the easiest way with a CSS-Grid. I assume, that you already know how to apply media queries. The 2 snippets below have the evry same code. Just the templates for the CSS-Grid (body) changed slightly.

Desktop:

body {
  margin: 0;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  grid-gap: 5px;
  grid-template-areas:
    "A B"
    "E C"
    "F D";
}

div {
  border: 1px solid black;
  padding: 5px;
  min-height: 50px;
}

#A {
  grid-area: A;
}

#B {
  grid-area: B;
}

#C {
  grid-area: C;
}

#D {
  grid-area: D;
}

#E {
  grid-area: E;
}

#F {
  grid-area: F;
}
  
<body>
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
  <div id="E">E</div>
  <div id="F">F</div>
</body>

Mobile:

body {
  margin: 0;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: auto;
  grid-gap: 5px;
  grid-template-areas:
    "A"
    "B"
    "C"
    "D"
    "E"
    "F";
}

div {
  border: 1px solid black;
  padding: 5px;
  min-height: 50px;
}

#A {
  grid-area: A;
}

#B {
  grid-area: B;
}

#C {
  grid-area: C;
}

#D {
  grid-area: D;
}

#E {
  grid-area: E;
}

#F {
  grid-area: F;
}
<body>
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
  <div id="E">E</div>
  <div id="F">F</div>
</body>

user_140724200

you can use grid or Flex (order) as well...

Flex Example:

.wrap{
    width: 50px;
    display: flex;
    flex-wrap: wrap;
    }

.wrap div{
    flex: 0 0 50%;
}
<div class="wrap">
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="E">E</div>
    <div id="C">C</div>
    <div id="F">F</div>
    <div id="D">D</div>
</div>

and for Mobile View:

.wrap{
    width: 50px;
    display: flex;
    flex-wrap: wrap;
}

.wrap div{
    flex: 0 0 100%;
}

#A{order: 1;}
#B{order: 2;}
#C{order: 3;}
#D{order: 4;}
#E{order: 5;}
#F{order: 6;}
<div class="wrap">
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="E">E</div>
    <div id="C">C</div>
    <div id="F">F</div>
    <div id="D">D</div>
</div>

user_145605740
Related