Create columns in content depending on screenwidth

Question

I would like to create an article with 2 columns in Joomla with the JCE editor. These two columns should revert to one column on smaller screens like smartphones.

Can I use Bootstrap code for this and how can this be done?

If not, does anyone know an other solution?

Any help would be appreciated.

Answer 1

Found the solution by using Bootstrap in the JCE code editor:

<div class="row">
<div class="col-sm-4">
Left - Enter your content here.
</div>
<div class="col-sm-4">
Center - Enter your content here.
</div>
<div class="col-sm-4">
Right - Enter your content here.
</div>
</div>
 

By using CSS i could create the padding between the columns:

@media (min-width: 768px){
.col-sm-4 {
    padding: 0px 10px 0px 10px;
}
}