css - 如果侧立柱高度较长，则在立柱上建立较大的空间

大家好关于这个问题，我已经尝试了几个小时。我想达到如下所述的大列位置，但是我得到了其他东西。

   medium               large                 What I get

[    A    ]  |  [    A    ][         ]  |  [    A    ][         ]
 ---------   |   --------- [    B    ]  |             [    B    ]
[    B    ]  |  [         ][         ]  |             [         ]
 ---------   |  [    C    ] ---------   |   ---------  ---------
[    C    ]  |  [         ][    D    ]  |  [         ][    D    ]
 ---------   |  [         ]             |  [    C    ]
[    D    ]  |                          |  [         ]
             |                          |  [         ]

如您所见，大屏幕中A和C之间有很大的差距。我想让C上升并占用空白空间，而不要使用任何技巧。

这是我尝试过的代码。

<div class="row profile align-top">
    <div id="A" class="column small-12 large-8">
        .....
    </div>

    <div id="B" class="column small-12 large-4">
        ....
    </div>

    <div id="C" class="column small-12 large-8">
        ....
    </div>

    <div id="D" class="column small-12 large-4">
        .....
    </div>
</div>

谢谢你们！

编辑：

添加jfiddle示例：
https://jsfiddle.net/k18zw694/2/

最佳答案

好的，您必须做不同的事情。将各列嵌套在其他列中，一左一右。

   <div class="left column small-12 large-6"><!-Content here--></div>
   <div class="right column small-12 large-6"><!-Content here--></div>

更新了fiddle

关于css - 如果侧立柱高度较长，则在立柱上建立较大的空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35225512/