html - Flex ordering issue: is it possible to change the flow order?

This is my attempt to create a CSS template with the following features:

for smaller viewports (< 1200px) single column, with these items:
1. box-menu
2. box-data
3. box-footer
for larger viewports, switch to a two columns layout:
- left column: box-menu and box-footer without any scrolling
- right column: box-data allowing scrolling of this column only, if the content is longer than the available height

Here my code:

:root {
  --color-text: #521D03;
  --color-menu-background: #33dd00;
  --color-content-background: #FFFFFF;
  --color-lines: #521D03;
}

html,
body,
.container {
  height: 100%;
}

body {
  margin: 0;
}

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

.button {
  display: block;
  font-weight: bold;
  font-size: 32px;
  line-height: 0.9em;
  text-decoration: none;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.box {
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  color: var(--color-text);
}

.box-menu {
  background-color: var(--color-menu-background);
  text-align: center;
  justify-content: space-around;
}

.box-data {
  background-color: var(--color-content-background);
  background-color: #aaaaaa;
  flex: 1;
}

.box-footer {
  background-color: var(--color-menu-background);
  line-height: 1em;
  text-align: center;
}

.box-menu .menu-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-footer {
  flex: 0 1 150px;
  text-align: center;
}

/* Larger viewports */
@media (min-width: 1200px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .box-menu,
  .box-data,
  .box-footer {
    flex-basis: 50%;
  }

  .box-menu {
    height: calc(100% - 150px);
  }

  .box-footer {
    height: 150px;
  }

  .box-data {
    height: 100%;
    overflow-y: auto;
  }
}

<div class="container">
  <div class="box box-menu">

    <div class="menu-header">
      <h1>MY LOGO</h1>
    </div>

    <div class="menu-content">
      <a class="button" href="/">MENU 1</a>
      <a class="button" href="/">MENU 2</a>
      <a class="button" href="/">MENU 3</a>
    </div>

  </div>
  <div class="box box-data">

    <div class="data-header">
      <div class="nav-section">
        <h3>MY NAV</h3>
      </div>
    </div>

    <div class="data-content">
      MY LONG CONTENT

      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
    </div>

    <div class="data-footer">
      <div class="menu-content">
        <a class="button clear">MY BUTTON</a>
      </div>
    </div>

  </div>

  <div class="box box-footer">
    MY FOOTER
  </div>

</div>

This is my attempt to create a CSS template with the following features:

for smaller viewports (< 1200px) single column, with these items:
1. box-menu
2. box-data
3. box-footer
for larger viewports, switch to a two columns layout:
- left column: box-menu and box-footer without any scrolling
- right column: box-data allowing scrolling of this column only, if the content is longer than the available height

Here my code:

:root {
  --color-text: #521D03;
  --color-menu-background: #33dd00;
  --color-content-background: #FFFFFF;
  --color-lines: #521D03;
}

html,
body,
.container {
  height: 100%;
}

body {
  margin: 0;
}

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

.button {
  display: block;
  font-weight: bold;
  font-size: 32px;
  line-height: 0.9em;
  text-decoration: none;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.box {
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  color: var(--color-text);
}

.box-menu {
  background-color: var(--color-menu-background);
  text-align: center;
  justify-content: space-around;
}

.box-data {
  background-color: var(--color-content-background);
  background-color: #aaaaaa;
  flex: 1;
}

.box-footer {
  background-color: var(--color-menu-background);
  line-height: 1em;
  text-align: center;
}

.box-menu .menu-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-footer {
  flex: 0 1 150px;
  text-align: center;
}

/* Larger viewports */
@media (min-width: 1200px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .box-menu,
  .box-data,
  .box-footer {
    flex-basis: 50%;
  }

  .box-menu {
    height: calc(100% - 150px);
  }

  .box-footer {
    height: 150px;
  }

  .box-data {
    height: 100%;
    overflow-y: auto;
  }
}

<div class="container">
  <div class="box box-menu">

    <div class="menu-header">
      <h1>MY LOGO</h1>
    </div>

    <div class="menu-content">
      <a class="button" href="/">MENU 1</a>
      <a class="button" href="/">MENU 2</a>
      <a class="button" href="/">MENU 3</a>
    </div>

  </div>
  <div class="box box-data">

    <div class="data-header">
      <div class="nav-section">
        <h3>MY NAV</h3>
      </div>
    </div>

    <div class="data-content">
      MY LONG CONTENT

      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
    </div>

    <div class="data-footer">
      <div class="menu-content">
        <a class="button clear">MY BUTTON</a>
      </div>
    </div>

  </div>

  <div class="box box-footer">
    MY FOOTER
  </div>

</div>

The smaller viewport code is working fine. When it switches to the two columns layout the box-footer is placed (as expected) after the box-data causing a gap:

I tried to fix with the order property, but it changes the order of the items, not the order of the flow.

As far as I understand, flex will count 1. upper left, 2. upper right, 3. lower left, etc... Instead, to match my needs it should be 1 upper left (menu), 2 lower left (footer) and 3 upper right (data).

How to place the box-footer just below the box-menu without any gap?

Share Improve this question edited Apr 2 at 6:07 asked Apr 2 at 5:47 Mark 5,17510 gold badges73 silver badges151 bronze badges

It's probably just be me and my English, But I don't understand what "it" is in "How to place it [...]". There are two gaps in your layout, so I'm not sure which one you're talking about. It would be easier if you could show an image of the expected layout. That said, you should probably make your life easier and use grid instead of flex. – Arkellys Commented Apr 2 at 5:56
@Arkellys thanks, my English is poor, I know. I've updated the question. Hope it is clear now. I'm not sure about the second gap you're talking about – Mark Commented Apr 2 at 5:58
Thank you for the clarifications. If you put a background-color on box-data, you will see the second gap. You have the first gap because you remove 150px on box-menu height. If you expect to have the footer go up to fill the gap, then I really think grid display is more appropriate than flex. – Arkellys Commented Apr 2 at 6:04
There is only one question in my question, why should be closed!? – Mark Commented Apr 2 at 6:05
@Arkellys, thanks. Would you mind to provide an answer about how to use grid instead of flex? – Mark Commented Apr 2 at 6:06

| Show 1 more comment

2 Answers 2

Sorted by: Reset to default 1

For this kind of layout, using grid layout instead of flex is more appropriate. You can define the grid-template you want depending on the screen size:

.container {
  display: grid;
  grid-template:
    "menu"
    "data"
    "footer";
}

@media (min-width: 1200px) {
  .container {
    grid-template:
      "menu data"
      "footer data";
    grid-template-columns: 1fr 1fr;
  }
}

And then assign each grid-area:

.box-menu {
  grid-area: menu;
}

.box-data {
  grid-area: data;
}

.box-footer {
  grid-area: footer;
}

Here is the updated snippet:

:root {
  --color-text: #521D03;
  --color-menu-background: #33dd00;
  --color-content-background: #FFFFFF;
  --color-lines: #521D03;
}

html,
body,
.container {
  height: 100%;
}

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template:
    "menu"
    "data"
    "footer";
}

.button {
  display: block;
  font-weight: bold;
  font-size: 32px;
  line-height: 0.9em;
  text-decoration: none;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.box {
  padding: 1em;
  box-sizing: border-box;
  color: var(--color-text);
}

.box-menu {
  background-color: var(--color-menu-background);
  text-align: center;
  grid-area: menu;
}

.box-data {
  background-color: var(--color-content-background);
  grid-area: data;
  background-color: #aaaaaa;
}

.box-footer {
  background-color: var(--color-menu-background);
  line-height: 1em;
  text-align: center;
  grid-area: footer;
  height: max-content;
}

.box-data .data-footer {
  text-align: center;
}

/* Larger viewports */
@media (min-width: 1200px) {
  .container {
    grid-template:
      "menu data"
      "footer data";
    grid-template-columns: 1fr 1fr;
  }

  .box-data {
    overflow-y: auto;
  }
}

<div class="container">
  <div class="box box-menu">

    <div class="menu-header">
      <h1>MY LOGO</h1>
    </div>

    <div class="menu-content">
      <a class="button" href="/">MENU 1</a>
      <a class="button" href="/">MENU 2</a>
      <a class="button" href="/">MENU 3</a>
    </div>

  </div>
  <div class="box box-data">

    <div class="data-header">
      <div class="nav-section">
        <h3>MY NAV</h3>
      </div>
    </div>

    <div class="data-content">
      MY LONG CONTENT

      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
    </div>

    <div class="data-footer">
      <div class="menu-content">
        <a class="button clear">MY BUTTON</a>
      </div>
    </div>

  </div>

  <div class="box box-footer">
    MY FOOTER
  </div>

</div>

Now days CSS grid is the obvious choice, but flexbox is easy as well:

@media (min-width: 1200px) {
  /* container should stay column and wrap */
  .container {
    flex-wrap: wrap;
  }

  .box-menu {
    height: calc(100% - 150px);
  }
 
  .box-footer {
    height: 150px;
    order: 1; /* box footer should come before box-data */
  }

  .box-data {
    overflow-y: auto;
    order: 2; /* box footer should come before box-data */
  }
}

:root {
  --color-text: #521D03;
  --color-menu-background: #33dd00;
  --color-content-background: #FFFFFF;
  --color-lines: #521D03;
}

html,
body,
.container {
  height: 100%;
}

body {
  margin: 0;
}

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

.button {
  display: block;
  font-weight: bold;
  font-size: 32px;
  line-height: 0.9em;
  text-decoration: none;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.box {
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  color: var(--color-text);
}

.box-menu {
  background-color: var(--color-menu-background);
  text-align: center;
  justify-content: space-around;
}

.box-data {
  background-color: var(--color-content-background);
  background-color: #aaaaaa;
  flex: 1;
}

.box-footer {
  background-color: var(--color-menu-background);
  line-height: 1em;
  text-align: center;
}

.box-menu .menu-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-footer {
  flex: 0 1 150px;
  text-align: center;
}

/* Larger viewports */
@media (min-width: 1200px) {
  /* container should stay column and wrap */
  .container {
    flex-wrap: wrap;
  }

  .box-menu {
    height: calc(100% - 150px);
  }
 
  .box-footer {
    height: 150px;
    order: 1; /* box footer should come before box-data */
  }

  .box-data {
    overflow-y: auto;
    order: 2; /* box footer should come before box-data */
  }
}

<div class="container">
  <div class="box box-menu">

    <div class="menu-header">
      <h1>MY LOGO</h1>
    </div>

    <div class="menu-content">
      <a class="button" href="/">MENU 1</a>
      <a class="button" href="/">MENU 2</a>
      <a class="button" href="/">MENU 3</a>
    </div>

  </div>
  <div class="box box-data">

    <div class="data-header">
      <div class="nav-section">
        <h3>MY NAV</h3>
      </div>
    </div>

    <div class="data-content">
      MY LONG CONTENT

      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
    </div>

    <div class="data-footer">
      <div class="menu-content">
        <a class="button clear">MY BUTTON</a>
      </div>
    </div>

  </div>

  <div class="box box-footer">
    MY FOOTER
  </div>

</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Flex ordering issue: is it possible to change the flow order? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)