html - 从 3 列到 2 列 - 将 2 列堆叠在右侧

Question

鉴于此布局:

<div class="myrow">
  <div class="logo">
   <img src="https://unsplash.it/150/150">
  </div>
  <div class="name">
    <p>
    Someperson
    </p>
  </div>
  <div class="description">
  <p>
  longer text goes heeeeeeeeeeeere.
  </p>
  </div>
</div>

我想在屏幕大的时候有 3 列。在某个断点处，右侧的两列应该堆叠在一起。

大屏幕:

----------------------------
|logo | name | description |
----------------------------

较小的屏幕:

-----------------------
|logo | name           |
|     |----------------|
|     | description    |
-----------------------

这是我正在使用的 CSS:

div{
  float:left;
}

img{
  width: 100%;
}

  .logo{
  width: 13.3333333333%;
  min-height: 3rem;
}

.name{
  width: 82.6666666667%;  
}

.description{
  width: 82.6666666667%;
}

@media (min-width: 550px) {
  .logo{
    width: 13.3333333333%;
    min-height: initial;
  }

  .name{
    width: 22%;  
  }

  .description{
    width: 56.6666666667%;
  }
}

但是，在小屏幕上，描述会落在 Logo 下方并留在左侧。我试图给 Logo div 一个最小高度，以保持它的大并防止其他 div 向左移动，但可能我不明白它是如何工作的。

JSfiddle:https://jsfiddle.net/4uh3pryw/2/

Answer 1

在媒体查询中设置float:right @media (min-width: 550px)

.name{
width: 22%;  
float:right
}

.description{
 width: 56.6666666667%;
 float:right
}