Deze plugin laat je toe om snel kolommen aan te maken in een tekstveld. Ze zijn responsive als je er ook zelf de CSS bij maakt.

Eerst moet je in je tekstformaat de knop actief zetten.

Bij klikken kan je kiezen uit verschillende layouts.

Enkele voorbeelden

Dit wordt vertaald naar bijvoorbeeld deze 3 kolommen:

Op smartphone ziet dit er zo uit.

Wat doet deze module.. Ze zet de kolommen als div klaar met de nodige classes. 

De Drupallers veronderstellen nu dat je de responsive code er zelf gaat bij schrijven...

Ik heb dit voor je gedaan (simpele versie) en gebaseerd op de code die de module zelf gebruikt voor zijn CKEditor. Het breekpunt heb ik zelf moeten leggen.

/*
based on the CKEditor Responsive Plugin CSS itself*/

/* 4.85%;  } /* grid_1  */
.onecol,
.grid-1 {
  width: 5.801104972%;
}

/* 13.45%; } /* grid_2  */
.twocol,
.grid-2 {
  width: 14.364640883%;
}

/* 22.05%; } /* grid_3  */
.threecol,
.grid-3 {
  width: 22.928176794%;
}

/* 30.75%; } /* grid_4  */
.fourcol,
.grid-4 {
  width: 31.491712705%;
}

/* 39.45%; } /* grid_5  */
.fivecol,
.grid-5 {
  width: 40.055248616%;
}

/* 48%;    } /* grid_6  */
.sixcol,
.grid-6 {
  width: 48.618784527%;
}

/* 56.75%; } /* grid_7  */
.sevencol,
.grid-7 {
  width: 57.182320438000005%;
}

/* 65.4%;  } /* grid_8  */
.eightcol,
.grid-8 {
  width: 65.74585634900001%;
}

/* 74.05%; } /* grid_9  */
.ninecol,
.grid-9 {
  width: 74.30939226%;
}

/* 82.7%;  } /* grid_10 */
.tencol,
.grid-10 {
  width: 82.87292817100001%;
}

/* 91.35%; } /* grid_11 */
.elevencol,
.grid-11 {
  width: 91.436464082%;
}

/* 100%;   } /* grid_12 */
.twelvecol,
.grid-12 {
  width: 99.999999993%;
}

.onecol,
.twocol,
.threecol,
.fourcol,
.fivecol,
.sixcol,
.sevencol,
.eightcol,
.ninecol,
.tencol,
.elevencol,
.twelvecol,
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  position: relative;
  float: left;
  margin-left: 2.762430939%;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*.ckeditor-col-container {
  background-color: #ffbcbc;
  overflow: hidden;
  margin-bottom: 1em;
}*/

.first-col {
  margin-left: 0;
}

.last-col {
  margin-right: 0;
}

@media only screen and (max-width: 550px) {
   .first-col {
  margin-left: 10px;
}

.last-col {
  margin-right: 10px;
}
.onecol,
.twocol,
.threecol,
.fourcol,
.fivecol,
.sixcol,
.sevencol,
.eightcol,
.ninecol,
.tencol,
.elevencol,
.twelvecol,
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  position: relative;
  float: left;
  margin-left: 2.762430939%;
width:90%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
}