How can I restructure HTML elements that are side by side and stacked using only css and html?

Question

For the mobile version I want the title to be on top -> then the carousel -> then the form. For the desktop version I want the carousel to be on the left half of the screen and the title and form to be on the right side of the screen and stacked.

What's your html look like ? – Rainbow Mar 20 '20 at 21:31 — Rainbow, Mar 20 '20 at 21:31

score 1 · Accepted Answer · edited Mar 20 '20 at 22:07

1

#top {
  width: 50%;
  background-color: red;
  height: 10vh;
  float: right;
}

#middle {
  width: 50%;
  background-color: green;
  height: 30vh;
  float: left;
}

#bottom {
  width: 50%;
  float: right;
  vertical-align: top;
  background-color: blue;
  height: 15vh;
  vertical-align: top;
}

html,
body {
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 375px) {
  #top,
  #middle,
  #bottom {
    width: 100%;
  }
  /* STYLES GO HERE */
}

<div id='container'>
  <div id='top'></div>
  <div id='middle'></div>
  <div id='bottom'></div>
</div>

edited Mar 20 '20 at 22:07

Rainbow

6,772
3
11
28

answered Mar 20 '20 at 21:39

DCR

14,737
12
52
115

Mind clicking the tidy button, Thank you. – Rainbow Mar 20 '20 at 21:47
What tidy button?? – DCR Mar 20 '20 at 22:04
In the snippet. – Rainbow Mar 20 '20 at 22:07

score 0 · Answer 2 · answered Mar 20 '20 at 21:36

A easy way, but not really a recommended way, is to put all your elements in a grid. Here is some more information about grid for css: https://css-tricks.com/snippets/css/complete-guide-grid/

An other way with more customization opportunities is by making duplicate versions of your HTML, and changing the layout on one of the versions to match your mobile layout. And by giving both of the versions different classes you can realy easely change what layout is visible at what time.

For axample:

<body>
<div class='desktop'>
 //desktop layout
</div>
<div class='mobile'>
 //mobile layout
</div>
</body>

<style>
.mobile {
display: none;
}
.desktop {
display: block;
}
@media only screen and (max-width: 900px) {
.mobile {
display: block;
}
.desktop {
display: none;
}
</style>

How can I restructure HTML elements that are side by side and stacked using only css and html?

2 Answers2