在CSS中，將豎列改為橫行通常需要使用媒體查詢（Media Queries）來實現(xiàn)響應式設計，以下是一個簡單的示例，展示了如何將一個豎列布局轉換為橫行布局：

HTML結構：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
</div>

CSS樣式：

.container {
  display: flex;
  flex-direction: column; /* 默認是豎列布局 */
}
.item {
  width: 100%; /* 每個項目占滿整個容器寬度 */
}
@media (min-width: 600px) {
  .container {
    flex-direction: row; /* 當屏幕寬度達到600px時，轉換為橫行布局 */
  }
  .item {
    width: 50%; /* 每個項目現(xiàn)在占容器寬度的一半 */
  }
}

在這個示例中，我們使用了媒體查詢來檢測屏幕寬度，當屏幕寬度達到600px時，我們將容器的flex-direction屬性從column（豎列）更改為row（橫行），并且每個項目的寬度設置為容器寬度的一半，這樣，當屏幕寬度增加時，布局會自動從豎列轉換為橫行。

這只是一個簡單的示例，實際的應用場景可能需要更復雜的媒體查詢和樣式調整來滿足不同的設計需求，基本的原理是使用媒體查詢來檢測屏幕寬度的變化，并根據(jù)需要調整CSS樣式來實現(xiàn)布局的轉換。