Looking for way to from columns to rows

#1

Hi,

I am working on a website where my customer wants to have, on a wide screen, 3 columns with and undefined number of rows and that same contents should appear on a small screen with the 1st row of each column, and then 2nd row of each column, etc. I will probably be using Bootstrap.

Is this doable only fiddling with CSS ?

This is the drawing I got for the wide screen:

And this is for the small screen

#2

Hi there Corobori,

I believe that, presentationally, the items
should have the same heights row-wise. :winky:

Here is an example for you to try…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

h1 {
    font-size: 1.25em;
    color: #444;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
 }

#container {
    display: flex;
    flex-wrap: wrap;
    max-width: 62.5em;
    padding: 0.5%;
    margin: 2em auto;
    border: 1px solid #999;
    border-radius: 0.75em;
    background-color: #fff;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }

#container > div {
    width:32.33%;
    padding: 1em;
    margin: 0.5%;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-color: #efefff;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 );
 }

@media ( max-width: 41em ){
#container {
    display: block;
    width: 96%;
    padding: 0 0.5em;
  }

#container > div {
    width: 100%;
    margin: 0.5em 0;
  }
 }
</style>

</head>
<body>

 <h1>Page description</h1>

 <div id="container">

   <div>
    <h2>1.1</h2>
     <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
      Curabitur sit amet sem sed libero bibendum tempus faucibus       
      quis mi.
     </p>
   </div>

   <div>
    <h2>2.1</h2>
     <p>
      Nulla rhoncus vel ipsum in volutpat. Nam tortor 
      nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
      interdum justo ac justo vehicula consequat. Curabitur et 
      volutpat nibh. Phasellus rutrum lacus at dolor placerat 
      feugiat
     </p>
   </div>

   <div>
    <h2>3.1</h2>
     <p>
      Morbi porta, sapien nec molestie molestie, odio 
      magna vestibulum lorem, vitae feugiat est leo sit amet 
      nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
      magna sed, pretium commodo odio. Sed porttitor augue velit, 
      quis placerat diam sodales ac.
     </p>
   </div>

   <div>
    <h2>1.2</h2>
     <p>
      Curabitur vitae porta ex. 
      Praesent rutrum ex fringilla tellus tincidunt interdum. 
      Proin molestie lectus consectetur purus aliquam porttitor.
     </p>
   </div>

   <div>
    <h2>2.2</h2>
     <p>
      Curabitur ullamcorper sit amet libero in ullamcorper. 
      Donec sed laoreet quam. Phasellus malesuada libero felis, non 
      elementum ex tincidunt eget. Quisque cursus arcu vel diam 
      consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
     </p>
   </div>

   <div>
    <h2>3.2</h2>
     <p>
      In sapien massa, feugiat ut magna eu, hendrerit porttitor 
      justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam 
      facilisis, et molestie dolor blandit.
     </p>
   </div>

   <div>
    <h2>1.3</h2>
     <p>
      Fusce ac nisi ac magna scelerisque finibus a vitae sem.
     </p>
   </div>

   <div>
    <h2>2.3</h2>
     <p>
      Donec vehicula diam non leo efficitur, id euismod odio 
      tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
      et libero non diam tempor sagittis.
     </p>
   </div>

   <div>
    <h2>3.3</h2>
     <p>
      Quisque vel egestas 
      ipsum. Integer sed elit eu orci blandit commodo in in erat. 
      Donec blandit, mi at gravida varius, nulla tellus vulputate 
      ex, vitae euismod erat lectus rutrum diam.
     </p>
   </div>

   <div>
    <h2>1.4</h2>
     <p>
      Cum sociis natoque penatibus et magnis dis parturient montes, 
      nascetur ridiculus mus. Curabitur tristique varius ullamcorper.
     </p>
   </div>

   <div>
    <h2>2.4</h2>
     <p>
      Nam venenatis diam ante, et cursus elit porttitor at. Morbi 
      mattis leo at ex vehicula, non vestibulum ligula aliquam. 
      Maecenas non nibh sollicitudin, porttitor odio in, elementum 
      arcu.
     </p>
   </div>

   <div>
    <h2>3.4</h2>
     <p>
      Donec pulvinar orci enim. In pulvinar congue ante, ac 
      rutrum odio bibendum volutpat. Phasellus ac sem consequat 
      lorem congue malesuada vitae vitae diam. Donec eu imperdiet 
      augue.
     </p>
   </div>

<!-- #container --></div>


</body>
</html>

coothead

1 Like
#3

Is this a table?

#5

As observations go… The drawings look like three columns of content boxes of random lengths that are merged to one column at some narrow width at which time the order of the content boxes are changed. There doesn’t seem to be a “row” relationship in the examples.

#6

the items should have the same heights row-wise

The items won’t have the same heights

#7

Is this a table?

The sample was made using div

#8

You’re right ronpat the height of each boxes will be different. Actually in the wide screen version the items in the 2nd column would be narrower than the one in the 1st and 3rd column, and the same on a small screen.

#9

I was, of course, referring to the heights of the
content containers rather than their content. :winky:

Have you tried the code in post #2 ?

coothead

#10

I wasn’t asking about the mark-up, but the content.
Is the content tabular data?
Or to put it another way: Should it be a table?

The reason I ask is that if it should be a table, that will influence the structure of the mark-up, with cells of each row being contained and grouped within one of a number of rows, as opposed to every one being an equal sibling of a single parent container.
It’s the sort of thing that display: contents may solve, if only it had better support.

2 Likes
#11

Yes you could use flex for each column then remove the column wrapper and then re-order width flex.

I managed to get a version using css columns and then manual re-ordering with flex but if you breathe on it too hard it may well fall over. :slight_smile:

https://codepen.io/paulobrien/full/GaVQem

Doesn’t work in Edge (as edge’s implementation of css columns are still pretty broken).

I don’t think grid can do this either but haven’t tried yet :slight_smile:

#12

Hi there Paul,

it appears that 3.1 is at the bottom of column 2 when viewed in Firefox 67. :eek:

Perhaps, I breathed too hard. :biggrin:

coothead

#13

Yes, you should have held your breath :slight_smile:

I tested in Firefox quantum at first and it didn’t wok but then I upgraded to the latest version (Firefox quantum 67.0.1) and it started working. maybe the normal editions of Firefox are slightly different (I’m away from my array of browsers at the moment so can’t test fully).

I didn’t expect it to be that robust as good documentation on ‘break-before: column;’ is scarce. (When you use it in Edge it breaks the whole thing and makes another column outside the main container off the side of the screen !!).

Chrome seems ok but then again it may just be a lucky coincidence of column sizes etc. :wink:

1 Like
#14

Are you using Windows 10, because Firefox Quantum 67.0.1
with Windows 7 doesn’t work for me?

Be that as it may, I still believe that regular columns look much
neater and have the added benefit of working in all browsers. :winky:

https://codepen.io/anon/pen/VOoorE

coothead

#15

Yes the computer I;m using at the moment is Windows 10 (I’m away from home at the moment otherwise I’d have tested on my Mac as well).

Yes. I agree :slight_smile:

I was just having fun and trying to break browsers :wink:

3 Likes
#16

According to CanIUse break-before: column is not supported by Firefox or Chrome, but IE and Edge currently have full support for columns. Though a future release of Edge doe not. :upside_down_face:
For me it works in Chrome but not in Firefox.

2 Likes
#17

@coothead @PaulOB @SamA74 I had some other issues to solve and hadn’t time to go back to this.
Anyways here I am. Thanks for the tips, I wouldn’t have been able to do this myself. I’ll go into it this week and try using what you guys suggested.

I wasn’t asking about the mark-up, but the content.
Is the content tabular data?
Or to put it another way: Should it be a table?

The content will be “stand alone” meaning that one cell won’t have any relation whatsoever with its neighbour being on the right, left, top or bottom.

I’ll keep you updated, it will take a few weeks to get it up and running with the actual data.

#18

The issue is that, perhaps this answers a question I didn’t understand, it looks like a table whereas it shouldn’t. My client is expecting something like shown below on the right and what I am getting looks too close to a table with rows.

#19

I get the rather strong suspicion that CSS isn’t going to be able to solve this one on its own… essentially you’re going to have to find a trigger point and fire javascript to reorder the elements into/out of a singular column.

EDIT: Or… as my brain reorders that sentence, it realizes the ‘javascript’ component can be pseudo-done via CSS.

Create both versions - the individual columns version, wrapped in a div, and the single column version, and then use a CSS toggle to set it to display/hide dependant on width.

#20

Yes I think for the time being js would be required to avoid duplicating content.

Something like this perhaps.

#21

Hi there Corobori,

here is a code example of @m_hutley’s suggestion
to duplicate the content…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

h1 {
    font-size: 1.25em;
    color: #444;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
 }

#container-1,
#container-2 {
    display: flex; 
    flex-wrap: wrap;
    max-width: 62.5em;
    padding: 0.5%;
    margin: 2em auto;
    border: 1px solid #999;
    border-radius: 0.75em;
    background-color: #fff;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }

#container-2 {
   display:none;
 }

#container-1 > div,
#container-2 > div {
    width: 32.33%;
    padding: 1em;
    margin: 0.5%;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-color: #efefff;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 );
 }

#container-1 > div {
    padding: 0;
    border:0;
    background-color: transparent;
    box-shadow: none;
 }

#container-1 > div:nth-of-type( 1 ) {
    width:27%;
 }

#container-1 > div:nth-of-type( 2 ) {
    width:22%;
 }

#container-1 > div:nth-of-type( 3 ) {
    width:48%;
 }

#container-1 > div > div {
    padding: 1em;
    margin-bottom: 0.5em;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-color: #efefff;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 );
 }

@media ( max-width: 41em ){
#container-1 {
    display: none;
 }

#container-2 {
    display: block;
    width: 96%;
    padding: 0 0.5em;
  }

#container-2 > div {
    width: 100%;
    margin: 0.5em 0;
  }
 }
</style>

</head>
<body>

 <h1>Page description</h1>

 <div id="container-1">

  <div>
   <div>
    <h2>1.1</h2>
     <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
      Curabitur sit amet sem sed libero bibendum tempus faucibus       
      quis mi.
     </p>
   </div>
   <div>
    <h2>1.2</h2>
     <p>
      Curabitur vitae porta ex. 
      Praesent rutrum ex fringilla tellus tincidunt interdum. 
      Proin molestie lectus consectetur purus aliquam porttitor.
     </p>
   </div>
   <div>
    <h2>1.3</h2>
     <p>
      Fusce ac nisi ac magna scelerisque finibus a vitae sem.
     </p>
   </div>
   <div>
    <h2>1.4</h2>
     <p>
      Cum sociis natoque penatibus et magnis dis parturient montes, 
      nascetur ridiculus mus. Curabitur tristique varius ullamcorper.
     </p>
   </div>
  </div>

  <div>
   <div>
    <h2>2.1</h2>
     <p>
      Nulla rhoncus vel ipsum in volutpat. Nam tortor 
      nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
      interdum justo ac justo vehicula consequat. Curabitur et 
      volutpat nibh. Phasellus rutrum lacus at dolor placerat 
      feugiat
     </p>
   </div>
   <div>
    <h2>2.2</h2>
     <p>
      Curabitur ullamcorper sit amet libero in ullamcorper. 
      Donec sed laoreet quam. Phasellus malesuada libero felis, non 
      elementum ex tincidunt eget. Quisque cursus arcu vel diam 
      consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
     </p>
   </div>
   <div>
    <h2>2.3</h2>
     <p>
      Donec vehicula diam non leo efficitur, id euismod odio 
      tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
      et libero non diam tempor sagittis.
     </p>
   </div>
   <div>
    <h2>2.4</h2>
     <p>
      Nam venenatis diam ante, et cursus elit porttitor at. Morbi 
      mattis leo at ex vehicula, non vestibulum ligula aliquam. 
      Maecenas non nibh sollicitudin, porttitor odio in, elementum 
      arcu.
     </p>
   </div>
  </div>

  <div>
   <div>
    <h2>3.1</h2>
     <p>
      Morbi porta, sapien nec molestie molestie, odio 
      magna vestibulum lorem, vitae feugiat est leo sit amet 
      nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
      magna sed, pretium commodo odio. Sed porttitor augue velit, 
      quis placerat diam sodales ac.
     </p>
   </div>
   <div>
    <h2>3.2</h2>
     <p>
      In sapien massa, feugiat ut magna eu, hendrerit porttitor 
      justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam 
      facilisis, et molestie dolor blandit.
     </p>
   </div>
   <div>
    <h2>3.3</h2>
     <p>
      Quisque vel egestas 
      ipsum. Integer sed elit eu orci blandit commodo in in erat. 
      Donec blandit, mi at gravida varius, nulla tellus vulputate 
      ex, vitae euismod erat lectus rutrum diam.
     </p>
   </div>
   <div>
    <h2>3.4</h2>
     <p>
      Donec pulvinar orci enim. In pulvinar congue ante, ac 
      rutrum odio bibendum volutpat. Phasellus ac sem consequat 
      lorem congue malesuada vitae vitae diam. Donec eu imperdiet 
      augue.
     </p>
   </div>
  </div>

<!-- #container-1 --></div> 

 <div id="container-2">

   <div>
    <h2>1.1</h2>
     <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
      Curabitur sit amet sem sed libero bibendum tempus faucibus       
      quis mi.
     </p>
   </div>

   <div>
    <h2>2.1</h2>
     <p>
      Nulla rhoncus vel ipsum in volutpat. Nam tortor 
      nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
      interdum justo ac justo vehicula consequat. Curabitur et 
      volutpat nibh. Phasellus rutrum lacus at dolor placerat 
      feugiat
     </p>
   </div>

   <div>
    <h2>3.1</h2>
     <p>
      Morbi porta, sapien nec molestie molestie, odio 
      magna vestibulum lorem, vitae feugiat est leo sit amet 
      nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
      magna sed, pretium commodo odio. Sed porttitor augue velit, 
      quis placerat diam sodales ac.
     </p>
   </div>

   <div>
    <h2>1.2</h2>
     <p>
      Curabitur vitae porta ex. 
      Praesent rutrum ex fringilla tellus tincidunt interdum. 
      Proin molestie lectus consectetur purus aliquam porttitor.
     </p>
   </div>

   <div>
    <h2>2.2</h2>
     <p>
      Curabitur ullamcorper sit amet libero in ullamcorper. 
      Donec sed laoreet quam. Phasellus malesuada libero felis, non 
      elementum ex tincidunt eget. Quisque cursus arcu vel diam 
      consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
     </p>
   </div>

   <div>
    <h2>3.2</h2>
     <p>
      In sapien massa, feugiat ut magna eu, hendrerit porttitor 
      justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam 
      facilisis, et molestie dolor blandit.
     </p>
   </div>

   <div>
    <h2>1.3</h2>
     <p>
      Fusce ac nisi ac magna scelerisque finibus a vitae sem.
     </p>
   </div>

   <div>
    <h2>2.3</h2>
     <p>
      Donec vehicula diam non leo efficitur, id euismod odio 
      tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
      et libero non diam tempor sagittis.
     </p>
   </div>

   <div>
    <h2>3.3</h2>
     <p>
      Quisque vel egestas 
      ipsum. Integer sed elit eu orci blandit commodo in in erat. 
      Donec blandit, mi at gravida varius, nulla tellus vulputate 
      ex, vitae euismod erat lectus rutrum diam.
     </p>
   </div>

   <div>
    <h2>1.4</h2>
     <p>
      Cum sociis natoque penatibus et magnis dis parturient montes, 
      nascetur ridiculus mus. Curabitur tristique varius ullamcorper.
     </p>
   </div>

   <div>
    <h2>2.4</h2>
     <p>
      Nam venenatis diam ante, et cursus elit porttitor at. Morbi 
      mattis leo at ex vehicula, non vestibulum ligula aliquam. 
      Maecenas non nibh sollicitudin, porttitor odio in, elementum 
      arcu.
     </p>
   </div>

   <div>
    <h2>3.4</h2>
     <p>
      Donec pulvinar orci enim. In pulvinar congue ante, ac 
      rutrum odio bibendum volutpat. Phasellus ac sem consequat 
      lorem congue malesuada vitae vitae diam. Donec eu imperdiet 
      augue.
     </p>
   </div>

<!-- #container-2 --></div>

</body>
</html>

Or you can just download the file…

Corobori.html (8.2 KB)

coothead

1 Like