CODEWITHSUNDEEP
htmlcss
YulePale
YulePale

Reputation: 7726

Is it possible to wrap a middle div only into the next row using css

Consider the following code

    <div class="container">
        <div class="left">LEFT</div>
        <div class="center">CENTER</div>
        <div class="right">RIGHT</div>
    </div>

Is it possible to wrap the center div to the next row when the viewport becomes smaller? After which we will have the left and the right divs on the upper row and the center div on the lower row?

Is it possible with css alone? Or does one require javascript/typescript?

A code example would be nice. Thank you.

Upvotes: 0

Views: 353

Answers (4)

Kravimir
Kravimir

Reputation: 690

That can actually be done without Flex and without Grid (which results in superior backwards compatibility).

.col {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: .5em;
}

.container .left {
	float: left;
	background: #fc3;
	min-height: 20em;
	width: 50%;
}
.container .right {
	display: inline-block;
	background: #3cf;
	min-height: 20em;
	width: 50%;
}
.container .center {
	float: left;
	clear: left;
	width: 100%;
	background: #3fc;
	min-height: 20em;
	min-width: 20em;
	
}
@media all and (min-width:60em) {
	.container .left,
	.container .right {
		width: 25%;
	}
	.container .center {
		clear: none;
		width: 50%;
	}
}
    <div class="container">
        <div class="left col">LEFT</div>
        <div class="center col">CENTER</div>
        <div class="right col">RIGHT</div>
    </div>

Upvotes: 1

sonic
sonic

Reputation: 1430

If you use flex or grid container, then there is property order, that you could use. https://developer.mozilla.org/en-US/docs/Web/CSS/order

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  width: 600px;
  border: 1px solid black;
}
.left{
  width: 200px;
  height: 200px;
  background: blue;

}
.right{

  width: 200px;
  height: 200px;
  background: yellow;
}
.center{

  width: 200px;
  height: 200px;
  background: red;
}
@media only screen 
and (max-width : 599px){

  .container{
    width: 480px;
  }
  .center{
    order: 3;
  }

}
<div class="container">
 <div class="left">LEFT</div>
 <div class="center">CENTER</div>
 <div class="right">RIGHT</div>
</div>

jsfiddle to play with: https://jsfiddle.net/jv0n8mg9/1/

Upvotes: 2

SuperDJ
SuperDJ

Reputation: 7661

With CSS grid it would look like the following:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container > div {
  border: 1px solid red;
}

.left {
  grid-column-start: 1;
}

.center {
  grid-column-start: 2;
  grid-row-start: 2;
}

.right {
  grid-column-start: 3;
}
<div class="container">
        <div class="left">LEFT</div>
        <div class="center">CENTER</div>
        <div class="right">RIGHT</div>
    </div>

Upvotes: 0

Mihai T
Mihai T

Reputation: 17697

Yes, just use flex and on the container and change the order of the center div.

See code below, and wrap it in a @media only screen(max-width: 768px) or what breakpoint you need.

.container {
  display: flex;
  flex-wrap: wrap;
}

.container div {
  width: 50%;
  border: 1px solid red;
  height: 20px;
  box-sizing: border-box;
}

.center {
  order: 3;
  margin: 0 auto;
}
 <div class="container">
        <div class="left">LEFT</div>
        <div class="center">CENTER</div>
        <div class="right">RIGHT</div>
    </div>

Upvotes: 1

Related Questions