如何使用文本和SVG创建两列？

Question

我读过的大多数文档都只讨论了如何创建列文本，如何创建这些列，以便svg在左边，文本在最右边？它怎么能有响应？

所需的布局：

HTML：

<div class="container">
    <div class="row">
    <div class="col">
<svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.68503 -307.68503z" fill-rule="evenodd"></path><path fill="#ff9300" d="m145.55905 201.67563l0 0c0 -29.847168 24.195908 -54.043076 54.043076 -54.043076l216.16582 0l0 0c14.33313 0 28.079193 5.693802 38.214233 15.828842c10.13504 10.13504 15.828857 23.881119 15.828857 38.214233l0 216.1658c0 29.847168 -24.195923 54.04309 -54.04309 54.04309l-216.16582 0c-29.847168 0 -54.043076 -24.195923 -54.043076 -54.04309z" fill-rule="evenodd"></path><path fill="#ffb738" d="m277.81104 129.62225l0 0c0 -5.499771 4.458435 -9.958214 9.958191 -9.958214l39.831635 0l0 0c2.6410828 0 5.1739807 1.0491638 7.041504 2.9166946c1.8675232 1.8675232 2.916687 4.400429 2.916687 7.041519l0 151.01273c0 5.499756 -4.458435 9.958191 -9.958191 9.958191l-39.831635 0c-5.499756 0 -9.958191 -4.458435 -9.958191 -9.958191z" fill-rule="evenodd"></path><path fill="#ffffff" d="m369.55905 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7244263 0l0 26.0l-15.4487915 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m403.27682 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7243958 0l0 26.0l-15.448822 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#efefef" d="m272.4567 119.66404l70.456696 0l0 27.968513l-70.456696 0z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Fast Shipping</h2>
      </div>
      <div class="col">
<svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.68503 -307.68503z" fill-rule="evenodd"></path><path fill="#ff9300" d="m145.55905 201.67563l0 0c0 -29.847168 24.195908 -54.043076 54.043076 -54.043076l216.16582 0l0 0c14.33313 0 28.079193 5.693802 38.214233 15.828842c10.13504 10.13504 15.828857 23.881119 15.828857 38.214233l0 216.1658c0 29.847168 -24.195923 54.04309 -54.04309 54.04309l-216.16582 0c-29.847168 0 -54.043076 -24.195923 -54.043076 -54.04309z" fill-rule="evenodd"></path><path fill="#ffb738" d="m277.81104 129.62225l0 0c0 -5.499771 4.458435 -9.958214 9.958191 -9.958214l39.831635 0l0 0c2.6410828 0 5.1739807 1.0491638 7.041504 2.9166946c1.8675232 1.8675232 2.916687 4.400429 2.916687 7.041519l0 151.01273c0 5.499756 -4.458435 9.958191 -9.958191 9.958191l-39.831635 0c-5.499756 0 -9.958191 -4.458435 -9.958191 -9.958191z" fill-rule="evenodd"></path><path fill="#ffffff" d="m369.55905 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7244263 0l0 26.0l-15.4487915 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m403.27682 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7243958 0l0 26.0l-15.448822 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#efefef" d="m272.4567 119.66404l70.456696 0l0 27.968513l-70.456696 0z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Fast Shipping</h2>
      </div>
    </div>
    </div>

CSS：

  .container {
    background-color: #000;
  }

完整代码： https://pastebin.com/THXaazNu