How to make flex responsive like this?

What have you tried? Where is your code?

The layout is pretty much the default layout for flexbox.

  • Create a parent container (flex container) for each section.

  • Put two child containers inside the parent section.

  • Inside the child containers, put the content (image and text).

  • Use the HTML source order to switch the content (img > text, text > image), or look into using the order property.

As an aside: I wouldn’t suggest the order property if it can be avoided. It’s better to keep the source order the same as the page order whenever possible.

(post deleted by author)

Why not responsive in phons!!


		<div class="container text-center features-container">
				<div class="feature-items">
						<div class="authentication-container">
								<div class="item item-right">
										<img class="authentication" src="" alt="Authentication">
								<div class="item item-left">
										<h4 class="authentication-title">Attribute commits with collaborators easily</h4>
										<p class="authentication-sub">Quickly add co-authors to your commit. Great for pairing and excellent for sending a little love/credit to that special someone who helped fix that gnarly bug of yours. See the attribution on the history page, undo an accidental attribution, and see the co-authors on</p>

CSS Code

.features-container, .authentication-container {
	margin-left: auto;
	margin-right: auto;
	text-align: center !important;

.features-container {
	max-width: 900px;

.authentication-container {
	align-items: center !important;
	display: flex !important;
	color: rgba(255,255,255,0.65);

.authentication {
	max-width: 314px;
	border-style: none;
	text-align: right !important;

.authentication-title {
	margin-top: 0;
	margin-bottom: 0;
	color: white !important;
	text-align: left !important;

.authentication-sub {
	text-align: left !important;

@media (min-width: 768px) {
	.item {
		width: 33.3333333333%;
		text-align: right !important;
		padding: 32px !important;
		flex: 1 1 auto !important;
		border: 1px solid rebeccapurple;

Flexbox doesn’t “automagically” make it responsive.

If you want the elements to stack you can switch the flex-direction to column in the media query, or you can use flex-wrap: wrap; on the flexbox container.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.