Передвинуть блоки

Question

как передвинуть нижний блок наверх?

вот мой код

        <div class="section__news">
            <div class="section__news-block"></div>
            <div class="section__news-block"></div>
            <div class="section__news-block"></div>
            <div class="section__news-block grand-block"></div>
            <div class="section__news-block"></div>
            <div class="section__news-block"></div>
            <div class="section__news-block"></div>
            <div class="section__news-block"></div>
        </div>
        & .section__news-block
        height: 200px
        width: calc((100% / 4) - 4px)
        background-size: cover
        display: inline-block
        transition: .2s ease
        &:nth-child(3n + 1)
            background-image: url(../img/img-1.jpg)
        &:nth-child(3n + 2)
            background-image: url(../img/img-2.jpg)
        &:nth-child(3n + 3)
            background-image: url(../img/img-3.jpg)
        &.grand-block
            width: calc((100% / 2) - 4px)
            height: 500px

Answer 1

> Там много чего нужно доделать

.section__news {
    display: flex;
    flex-wrap: wrap;
}
.section__news-block {
    height: 200px;
    width: calc(100% / 4);
    transition: .2s ease;
}
.section__news-block:nth-child(3n + 1) {
    background: url(img/1.jpg) 50% 50%/cover no-repeat; 
}
.section__news-block:nth-child(3n + 2) {
    background: url(img/2.jpg) 50% 50%/cover no-repeat;
}
.section__news-block:nth-child(3n + 3) {
    background: url(img/3.jpg) 50% 50%/cover no-repeat;
}
.grand-block {
    height: 500px;
    width: 100%;
}
.box, .one {
    width: 100%;
}
.box {
    display: flex;
}
.wrapper__one, .wrapper__two {
    display: flex;
    height: 300px;
}
.two {
    width: 100%;
}


<div class="section__news">
  <div class="section__news-block"></div>
  <div class="section__news-block"></div>
  <div class="section__news-block"></div>
  <div class="box">
    <div class="section__news-block grand-block"></div>
    <div class="one">
      <div class="wrapper__one">
        <div class="section__news-block two"></div>
        <div class="section__news-block two"></div>
      </div>
      <div class="wrapper__two">
        <div class="section__news-block two"></div>
        <div class="section__news-block two"></div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Передвинуть блоки

Ответы (1 шт):