我使用Bootstrap 4折叠来显示单击后的文本。然而，我正在为显示内容的地方而挣扎。当点击按钮时，文本显示在右边，我想把它放在按钮下面。
你能告诉我怎么换吗？
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="row mt-4 mb-4 product-card-element text-left">
<button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#description" aria-expanded="false" aria-controls="description">
Test1
</button>
<button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#requirements" aria-expanded="false" aria-controls="requirements">
Test 2
</button>
<button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#output" aria-expanded="false" aria-controls="output">
Test 3
</button>
<div class="collapse" id="description">
test test description
</div>
<div class="collapse" id="requirements">
<ol class="list-group-numbered">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ol>
</div>
<div class="collapse" id="output">
test test
</div>
</div>要在按钮下显示折叠div，一个选项是将每个按钮div对包装在父div中，例如：
<div class="col-4">
<button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#output" aria-expanded="false" aria-controls="output">
Test 3
</button>
<div class="collapse" id="output">
test test
</div>
</div>
演示：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="row mt-4 mb-4 product-card-element text-left">
<div class="col-4">
<button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#description" aria-expanded="false" aria-controls="description">
Test1
</button>
<div class="collapse" id="description">
test test description
</div>
</div>
<div class="col-4">
<button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#requirements" aria-expanded="false" aria-controls="requirements">
Test 2
</button>
<div class="collapse" id="requirements">
<ol class="list-group-numbered">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ol>
</div>
</div>
<div class="col-4">
<button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#output" aria-expanded="false" aria-controls="output">
Test 3
</button>
<div class="collapse" id="output">
test test
</div>
</div>
</div>添加行和列，这样就可以根据输出的显示位置添加更多列，并添加CSS。
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
</style>
</head>
<body>
<div class="row">
<div class="column">
<div class="row mt-4 mb-4 product-card-element >
<button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#description" aria-expanded="false" aria-controls="description">
Test1
</button>
<button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#requirements" aria-expanded="false" aria-controls="requirements">
Test 2
</button>
<button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#output" aria-expanded="false" aria-controls="output">
Test 3
</button>
</div>
<div class="column">
<div class="collapse" id="description">
test test description
</div>
<div class="collapse" id="requirements">
<ol class="list-group-numbered">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</div>
</div>
</ol>
</div>
<div class="collapse" id="output">
test test
</div>
</div>
</body>
</html>