如何从“BMI的限制”中实现此页面的布局。我尝试过grid，但我无法实现我想要的，或者我无法操作它，因为桌面，平板电脑和移动的视图是不同的。请参见Destop viewTablet viewMobile view，我将不同的行分别分组，每行都有grid。查看下面的HTML标签：

.ftb {
  display: grid;
  grid-template-columns: auto 250px;
  gap: 20px;
  margin: 10px;
  padding: 20px 150px 20px 50px;
}

[class*="ftbk"] {
  display: grid;
  grid-template-columns: 250px 250px;
  gap: 20px;
  justify-content: end;
  margin: 10px;
}

[class*="item-"] {
  border-radius: 10px;
  padding: 10px;
  box-shadow: 5px 5px 50px 0px rgb(231, 245, 254);
}

.ftbk2 {
  padding-right: 50px;
}

.ftbk3 {
  padding-right: 200px;
}

.diff-1 {
  padding: px;
}

.icon_tittle {
  display: grid;
  grid-template-columns: 50px 1fr;
}

.icon_tittle .material-symbols-outlined {
  padding: 0;
}

/* Icon Styles */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 200, 'opsz' 48;
}

.material-symbols-outlined {
  font-size: 24px;
  padding: 10px;
  border-radius: 50%;
}

.soup_kitchen {
  background-color: #fcddec;
  color: #f273b3;
}

.exercise {
  background-color: #f9ede0;
  color: #eb8014;
}

.sleep {
  background-color: #d8f4f7;
  color: #88dcdd;
}

.gender {
  color: #f5b39a;
}

.age {
  color: #aee8e7;
}

.muscle {
  color: #c598f2;
}

.pregnancy {
  color: #fde998;
}

.race {
  color: #f699c4;
}

<div class="ftb">
  <div class="diff-1">
    <h2>Limitations of BMI</h2>
    <p>Although BMI is often a practical indicator of healthy weight, it is not suited for every person. Specific groups should carefully consider their BMI outcomes, and in certain cases, the measurement may not be beneficial to use.</p>
  </div>
  <div class="item-2">
    <div class="icon_tittle">
      <div><span class="material-symbols-outlined gender">woman</span></div>
      <h4>Gender</h4>
    </div>
    <p>The development and body fat composition of girls and boys vary with age. Consequently, a child's age and gender are considered when evaluating their BMI.</p>
  </div>
</div>
<div class="ftbk2">
  <div class="item-3">
    <div class="icon_tittle">
      <div><span class="material-symbols-outlined age">cake</span></div>
      <h4>Age</h4>
    </div>
    <p>In aging individuals, increased body fat and muscle loss may cause BMI to underestimate body fat content.</p>
  </div>
  <div class="item-4">
    <div class="icon_tittle">
      <div><span class="material-symbols-outlined muscle">sports_gymnastics</span></div>
      <h4>Muscle</h4>
    </div>
    <p>BMI may misclassify muscular individuals as overweight or obese, as it doesn't differentiate muscle from fat.</p>
  </div>
</div>
<div class="ftbk3">
  <div class="item-5">
    <div class="icon_tittle">
      <div><span class="material-symbols-outlined pregnancy">pregnancy</span></div>
      <h4>Pregnancy</h4>
    </div>
    <p>Expectant mothers experience weight gain due to their growing baby. Maintaining a healthy pre-pregnancy BMI is advisable to minimize health risks for both mother and child.</p>
  </div>
  <div class="item-6">
    <div class="icon_tittle">
      <div><span class="material-symbols-outlined race">directions_run</span></div>
      <h4>Race</h4>
    </div>
    <p>Certain health concerns may affect individuals of some Black and Asian origins at lower BMIs than others. To learn more, it is advised to discuss this with your GP or practice nurse.</h4>
  </div>
</div>