I've got a weird request in a project where I have to modify the style of an already running blog without making major changes in the markup.
One of the requirements include making some articles multi-column while others stay in single-column layout.
(Something like this)

I've been specifically told not to touch the content inside the <article>.. But how do I make columns without changing the markup? is it something I can do without changing the markup?
On second thought, if you're dealing with basic content (paragraphs etc.), you might get CSS columns to work: developer.mozilla.org/en-US/docs/Web/CSS/columns
Depends mostly on what you need to support though: http://caniuse.com/#feat=multicolumn
In short, it's possible using flexbox. Using flexbox, you can alter the layout without changing much in the CSS.
Have a look at this pen (http://codepen.io/nirmalyaghosh/full/yObVYr/).
I guess you're trying to implement something like this.
It's using flexbox and setting the flex-direction property to either row or column, you can achieve what you want.
Depending on the structure, you might have a look at flexbox. Is the content that's inside the article contained by an element on its own? Something like this I mean:
<article>
<div> ... content for left column... </div>
<div> ... content for right column... </div>
</article>
If so, you should be fine. A code example like a Codepen would help though :)
On how to use flexbox, check this article by CSS-Tricks: css-tricks.com/snippets/css/a-guide-to-flexbox
Try this code :
HTML :
<article class="content">
<p> ...Content... </p>
<article>
CSS :
.content{
columns : 2 ;
}
Alkshendra Maurya
Frontend Engineer | Hashnode Alumnus
Creating multiple columns without changing the markup would be very difficult.
Luckily for you though, you can take advantage of CSS multi column layouts here(developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts)
Doing something like this should work for you:
article { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }You can take a look here for detailed description on all the column properties: css-tricks.com/guide-responsive-friendly-css-columns/