html - Bootstrap 列应该在 xs 处彼此下方

Question

我制作了两个 Bootstrap 列(在桌面上并排放置)，并希望当客户端使用电话加入网站时，它们位于彼此下方。我已经添加了 col-xs-12 但它没有任何改变。

这是一张图片，它在桌面上的外观和现在在手机上的外观:

(红色容器是应该在黑色容器下面的列)

这是我的代码:

<section id="services">
    <div class="row">
        <div class="col col-xs-12 col-md-6 light">
            <h1 class="text-center">Lorem Ipsum</h1>
            <div class="container row">
                <div class="col-md-6 col-xs-12">
                    <img class="icon icons8-Customer-Support" width="48" height="48"
                        src="data:image/png;base64,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"><br/>
                    <h4>Lorem Ipsum</h4>
                    <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                </div>
                <div class="col-md-6 col-xs-12">
                    <img class="icon icons8-Design" width="48" height="48"
                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEHElEQVRoQ+2YW0hUQRiA/1nXXNcLi2Qh3rIiRMVWeispLYigLHouUSmKiF4iy4cIJQlStrdKKsgefA6khyJyTTcIIzC7YS5mKSqk4oI31svEbA4dj2fm/GeOFwQXfPHMmfm++f/5z38OgQ3+IxucHzYF1juCliNwuGmiHIAcajkTV7He8Gx9SwKL8E8XwRtXQ2KgstIL8/N+QkgfdTgq0urrO2UbhRbQwfM5V1RCA+9hC1BKxyEqqlgmgRIQwMPc7BwMBQc6e2pzC+ym03P/O2/8yJ+7Oe/bj2rnMpMwFZDB//zUDTMTU+DZvrWzpzZPWYLBE0r9AMTjDoUCuYE3hVgJqQAG3hUXC1nebHBGO5XSSQvPoY0kAKAz1edbtklCARE8X6T/e29k9xfhldKJPgLvaEz+40Dqgz3gIInaXddLUIBQms8XORvan6GAGTyfgJ0BZ7QzAm81nRg8LIAfADxjMXnd7ekNKSIJBg8OR5HRYV4mgIXXSnB4bDpp4fk8QonRkdc5HYHrokpkS0C78xp4aToZwYskKGU7D0Wniw8InwW2UqjnwxeYmZwGPbwonWTweglKCDWDlz6JMak0NjwCo/3DSw6yKJ0w8Fxi1JX/sT3z4XnZzvOxSmVU9tDSVyc2dt9CS3PdZMlBdmARD7xI2pALIG0hUAJsECYSeihendj/dy90gW/yGMRDCMH+L+ex8OhmTkViLeDRAiqRWO2dR6eQNu7YSKwVvKUIcBEzibWEVxKQpZMV+EmSCDXupub60pJTmNMtGmPaTotu1EfCKvxV9ysIOvLZ9EpdrNIZ0MtwCRvwSl2slkM5AnySusaGW5dmbtRg6jxLG83OK3Wx+k20JWClPdDDMxCDXspyOikL2IVnAka91PjwWEtXVdYR7MFWElgJeKP2gzeCKbsy0RKWBVYbHvtSpFSF1hAeXZ3QEbACDwChelfDvZfRpTWyXJa90fF0Skj2fOu948219SCzCs9bYrO2g0EZvT/w6uRwRsFObzbExruF1ck0Aqrw2N6JjdO+P/DqNBT8zeH5VIYSUgG78FYkjKoS+2Sj+y2TEApQP+yAH9AGFNIRNdn0TQqTTmbrUArP/GfjylGtBG2LLoc5UgXBcAoswJKvZrqFTOHtRILfawTProkj8HZLIwApg3naLZFAw9uREMHLBVpj+oBAZmRhYwnL8CoSMnihwP3q3MKMpKn2E3sH/2fLUglleCsSZvBCgdvXCp68+Jxx7ubxLlgm0RN2A4GTVj59iA6n7GBj4IUCVy7uD3b0Je9iAyIS+YO/gNDWyN/8bCsphj6zioG9biSBhRcKlJUVjSe6wiPbEqZbk+LDjZervwawQCrjtBJW4KWHWAXEzj1MglJSpK/zZnOathJmE6z39U2BzQjY3IG/DRn6T235U8YAAAAASUVORK5CYII="><br/>
                    <h4>Lorem Ipsum</h4>
                    <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                </div>
            </div>
            <div class="container row">
                <div class="col-md-6 col-xs-12">
                    <img class="icon icons8-Source-Code" width="48" height="48"
                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAEL0lEQVRoQ+2YPWzbVhDH/0e5ViEvHTIEWeIuhTtVXgo3S+1MhijKypCgW+0tU+MOTU15iDqYdNPF2bLF2Yp2sEOKQjY5QJBmi7d6a7IEHToUKCxUrsQrHmkair749ezWhrjyveP9737v7h0JF+ShC6IDYyH/t0yOMzLOyHEESnr9bkdxnzsbxRcygvKfoHWz+tNkq5X7g4m+sg11+9wKKa05i1D4CdqdS9b9pb/OrxC9tg3CZcsoLsoQIWycOVoBVq5Cd2sb6sNzKyTAqv0PXa3/oP5+boVouvOQiKdlYhULrXK18UGndbjTIfq6bqj7SSIpsPq7NfWGFXw3Cqvimj1PRPcy2akbu9WFP6N8K/IZ0SrOLoB8ZjKXj2q81wGBFRPqnTaujMLKC9pRUwSrYRvqijQhpYqzBcZymzCfNBvCGQ8rIG+Z6lyYc4WKk59g7IGwbRnqatj60IxoFWeZgEeu6y7UNrW9MIPD3zNpev0twN/bZnErih2BmKIoDQZWwhrnSCFxDIU5pq3X5+DyizCseu1EDeRQIV5qwQ2AHkdJbZiQYzznomDVd7YE2uAv26CFYWgPFCIOm9tqvgL4mWUWl8OcDH8fYIUHtqluhq/vXyGKDTE+UbK52UHFpk+IJ+Ko2WBmymSn5pNWqG5XBFbE/Auz+7FtagdJhByX/z0iYstQZ3tt9AkpiXsQqKxkc9MyRHjVqlLbBGPRNov5JCKCPcekvGbCTm9ZfkdIqeJUwVhNW2YHMH7AjO2kWHXb6yrLW5ahVoN3J0KC6sBMN2yzIJqflMcvGniVBqu+SqbXy0S8012WPSEnH4tQr+OqE1gRqGwZ6kzcvaPWB4FvA7Oikp26kFLFEYf7x24MZAgaKMQ/kH4Hl4mWptszRMqvMrHyfB2GVhAh77CD74xqPHGi6dvDFzKx6mrUDwYe9hMx/hi6pExOfZi2/AqsGLxrG8W1OAEYttbvcYe/gfGkt1EP7OyaXtsXjUeZzC0kFXOCFdFn9kbhZVoh3Y16UD8aekWJOw/0l0hnjYAVyyzMAMRphXjzEPP0sNvG6EtjjHmgrwnqzksm3pOBVZR56FSu8QXd+SgDHECha2mxSn2NDyIc1dA7l0TdEYf7jm0WrqTBKs48FDohCge91IbMA91CSgIrYN821dtJz0bceSiSEE+Mfyv+fNg8EDhc+Ma5nJnAW2b3etLROMk8FFmIPw80dzuE1VE/IDS9tgrQt2mw8n8HKdVMNleOWv4jC4mKiAyson6re51UIQFWxChYm+rTJA4l3SNVSHHduU0u7r2fPbz6c/XWUVKnkuyTKqRUqT1lptdpqlUSEWKPNCECq4n3+A1cWjprrKQKEVgpLt/PZpuXzhorqULU9do1xcWnUX+HJkVo2D5paMl2LK69sZC4ETvt9eOMnHaE49q/MBn5F/XtRFGQSNloAAAAAElFTkSuQmCC"><br/>
                    <h4>Lorem Ipsum</h4>
                    <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                </div>
                <div class="col-md-6 col-xs-12">
                    <img class="icon icons8-Individual-Server" width="48" height="48"
                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADmUlEQVRoQ+1ZXUhTURz/nfmFaJaCtAclTTHyIZU+oF5a5AiyyCJIR9rMKyoSaC/5VNaTEKQvpuTMVTB9iDTQpylpDwV9kEIZhKWiD5qwzLSa2k7cmYK6e88526422F7GOP+P3+//8TvcXYIA/5AAx48gga3uYLADAdGB7DzJQAhtBSFJmwKY0lFKSVFPu6WPlY9rhIz5xSObBn4FMaWj9raWZP8QMEmUFUiLc7vNwiww08A9Pjo80wIgKyZ14RhrjJgEjucX5+oI6WAl0+LcRenZ3raWTrXYTALZJqmGADdEAO6MWkLZgR9IiVtyu312hKLpzTZMzYeKhAEFbvbYLDU+ETDmF1tByCXezDL4xhwHoiPWrs2ck6C8O06MBKUP7G0tZh8JSH0gOMpLoMYwgyOJTo/mL8YjUNO3gzcUQNFvb7MYfCQgJqEdF74iKtyzaE3O6VDYES9AgC2lzB0wCkqoGoGpOR0KRAgAYEmpKgGjqSQToO/4Swb4dYTciUmW3dY8oIRBlYA3d4C8xE2nHBvGaH6BoKxLcIkBsO4CdQJeSKhcKZlE+cE5pMQuLsvotzA0vo4WU6B/JWdJqSYEREaOZesTAWO+mISywHh1zpBSxhJL8gJniiSOS0hDYvohxMQnIiY+we06Oz2B2elxjA+9gmPik0g42XbAbrNkebXEIhIaGhGJDGMB9KkZqgAnhwcxaH+EJecvbiJqUqrYAUOeOSlMFzrCk0UGf/h85WrFWT5yR14+rucmsehaSu5rt456iqtIQERC958uhT5lHwv3mnO5E2+77nH5qEmpIgGj6bIZ0LXyZMipbOAx22DTXV/B6ecqstvuW8U6IHAHaE1ATUqVR8gkdRLgDGeJNDWjwNMemyVXqAP/xR2wgljlLlDZga15kFdqpZKUKhI4cbGUulx/NB0N3uDh4eHott71iFWRQMWtO3T0yzAWFhZ482hiJ4NP2p2KhutXxQhU11tWH6uePLRoAu5cocQdt7ZSChLgrhav4aZ34KNtean3mkLc377+Xk/AqR/Cz7Re0DAnoj6cRMRk+mot/DJCvgJe77+egCP7NlyRM27QId/1iH1+JYAJzOoR2x9gBNwjtEceod+Iep/jvxHiXUot7YR34Fpd8wwhZLuWoLhjU4zVVkke3w4p3sTVdc0GgFhBsIs7kRaGFGMANddWlXh83cT8a1ELTP6MGSTgz2p6EyvYAW+q5k+fgO/AXzLWqEC+AlzUAAAAAElFTkSuQmCC">
                    <h4>Lorem Ipsum</h4>
                    <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                </div>
            </div>
        </div>
        <div class="col col-xs-12 col-md-6 dark">
            <h1 class="text-center">Lorem IpsumLorem Ipsum</h1>
            <p class="contact-text">Lorem IpsumLorem IpsumLorem IpsumLorem Ipsum <a href="mailto: kontakt@it-juwig.de">kontakt@it-juwig.de</a>Lorem IpsumLorem IpsumLorem Ipsum
            </p>
 
            <div id="success"></div>
 
            <form id="form">
                <div id="error"></div>
                <div class="form-group">
                    <input type="text" name="name" id="name" class="form-control" placeholder="Vorname"
                          autocomplete="off" required/>
                </div>
                <div class="form-group">
                    <input type="email" name="email" id="email" class="form-control" placeholder="Email"
                          autocomplete="off" required/>
                </div>
                <div class="form-group">
                    <label for="message">Nachricht</label>
                    <textarea class="form-control" id="message" rows="7" required></textarea>
                </div>
                <a class="button center-block" style="background: transparent; max-width: 128px;"
                  onclick="formRequest()">Absenden</a>
            </form>
        </div>
    </div>
</section>

Answer 1

从您的 div 容器中删除 col，这样它们就是 <div class="col-xs-12 col-md-6 light"> 这应该可以工作。

看起来这是覆盖了 col-xs-12 并使其自动适合行中的 2 列。

演示

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<section id="services">
    <div class="row">
        <div class="col-xs-12 col-md-6 light">
            <h1 class="text-center">Lorem Ipsum</h1>
            <div class="container row">
                <div class="col-md-6 col-xs-12">
                    <img class="icon icons8-Customer-Support" width="48" height="48"
                        src="data:image/png;base64,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"><br/>
                    <h4>Lorem Ipsum</h4>
                    <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                </div>
                <div class="col-md-6 col-xs-12">
                    <img class="icon icons8-Design" width="48" height="48"
                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEHElEQVRoQ+2YW0hUQRiA/1nXXNcLi2Qh3rIiRMVWeispLYigLHouUSmKiF4iy4cIJQlStrdKKsgefA6khyJyTTcIIzC7YS5mKSqk4oI31svEbA4dj2fm/GeOFwQXfPHMmfm++f/5z38OgQ3+IxucHzYF1juCliNwuGmiHIAcajkTV7He8Gx9SwKL8E8XwRtXQ2KgstIL8/N+QkgfdTgq0urrO2UbhRbQwfM5V1RCA+9hC1BKxyEqqlgmgRIQwMPc7BwMBQc6e2pzC+ym03P/O2/8yJ+7Oe/bj2rnMpMwFZDB//zUDTMTU+DZvrWzpzZPWYLBE0r9AMTjDoUCuYE3hVgJqQAG3hUXC1nebHBGO5XSSQvPoY0kAKAz1edbtklCARE8X6T/e29k9xfhldKJPgLvaEz+40Dqgz3gIInaXddLUIBQms8XORvan6GAGTyfgJ0BZ7QzAm81nRg8LIAfADxjMXnd7ekNKSIJBg8OR5HRYV4mgIXXSnB4bDpp4fk8QonRkdc5HYHrokpkS0C78xp4aToZwYskKGU7D0Wniw8InwW2UqjnwxeYmZwGPbwonWTweglKCDWDlz6JMak0NjwCo/3DSw6yKJ0w8Fxi1JX/sT3z4XnZzvOxSmVU9tDSVyc2dt9CS3PdZMlBdmARD7xI2pALIG0hUAJsECYSeihendj/dy90gW/yGMRDCMH+L+ex8OhmTkViLeDRAiqRWO2dR6eQNu7YSKwVvKUIcBEzibWEVxKQpZMV+EmSCDXupub60pJTmNMtGmPaTotu1EfCKvxV9ysIOvLZ9EpdrNIZ0MtwCRvwSl2slkM5AnySusaGW5dmbtRg6jxLG83OK3Wx+k20JWClPdDDMxCDXspyOikL2IVnAka91PjwWEtXVdYR7MFWElgJeKP2gzeCKbsy0RKWBVYbHvtSpFSF1hAeXZ3QEbACDwChelfDvZfRpTWyXJa90fF0Skj2fOu948219SCzCs9bYrO2g0EZvT/w6uRwRsFObzbExruF1ck0Aqrw2N6JjdO+P/DqNBT8zeH5VIYSUgG78FYkjKoS+2Sj+y2TEApQP+yAH9AGFNIRNdn0TQqTTmbrUArP/GfjylGtBG2LLoc5UgXBcAoswJKvZrqFTOHtRILfawTProkj8HZLIwApg3naLZFAw9uREMHLBVpj+oBAZmRhYwnL8CoSMnihwP3q3MKMpKn2E3sH/2fLUglleCsSZvBCgdvXCp68+Jxx7ubxLlgm0RN2A4GTVj59iA6n7GBj4IUCVy7uD3b0Je9iAyIS+YO/gNDWyN/8bCsphj6zioG9biSBhRcKlJUVjSe6wiPbEqZbk+LDjZervwawQCrjtBJW4KWHWAXEzj1MglJSpK/zZnOathJmE6z39U2BzQjY3IG/DRn6T235U8YAAAAASUVORK5CYII="><br/>
                    <h4>Lorem Ipsum</h4>
                    <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                </div>
            </div>
            <div class="container row">
                <div class="col-md-6 col-xs-12">
                    <img class="icon icons8-Source-Code" width="48" height="48"
                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAEL0lEQVRoQ+2YPWzbVhDH/0e5ViEvHTIEWeIuhTtVXgo3S+1MhijKypCgW+0tU+MOTU15iDqYdNPF2bLF2Yp2sEOKQjY5QJBmi7d6a7IEHToUKCxUrsQrHmkair749ezWhrjyveP9737v7h0JF+ShC6IDYyH/t0yOMzLOyHEESnr9bkdxnzsbxRcygvKfoHWz+tNkq5X7g4m+sg11+9wKKa05i1D4CdqdS9b9pb/OrxC9tg3CZcsoLsoQIWycOVoBVq5Cd2sb6sNzKyTAqv0PXa3/oP5+boVouvOQiKdlYhULrXK18UGndbjTIfq6bqj7SSIpsPq7NfWGFXw3Cqvimj1PRPcy2akbu9WFP6N8K/IZ0SrOLoB8ZjKXj2q81wGBFRPqnTaujMLKC9pRUwSrYRvqijQhpYqzBcZymzCfNBvCGQ8rIG+Z6lyYc4WKk59g7IGwbRnqatj60IxoFWeZgEeu6y7UNrW9MIPD3zNpev0twN/bZnErih2BmKIoDQZWwhrnSCFxDIU5pq3X5+DyizCseu1EDeRQIV5qwQ2AHkdJbZiQYzznomDVd7YE2uAv26CFYWgPFCIOm9tqvgL4mWUWl8OcDH8fYIUHtqluhq/vXyGKDTE+UbK52UHFpk+IJ+Ko2WBmymSn5pNWqG5XBFbE/Auz+7FtagdJhByX/z0iYstQZ3tt9AkpiXsQqKxkc9MyRHjVqlLbBGPRNov5JCKCPcekvGbCTm9ZfkdIqeJUwVhNW2YHMH7AjO2kWHXb6yrLW5ahVoN3J0KC6sBMN2yzIJqflMcvGniVBqu+SqbXy0S8012WPSEnH4tQr+OqE1gRqGwZ6kzcvaPWB4FvA7Oikp26kFLFEYf7x24MZAgaKMQ/kH4Hl4mWptszRMqvMrHyfB2GVhAh77CD74xqPHGi6dvDFzKx6mrUDwYe9hMx/hi6pExOfZi2/AqsGLxrG8W1OAEYttbvcYe/gfGkt1EP7OyaXtsXjUeZzC0kFXOCFdFn9kbhZVoh3Y16UD8aekWJOw/0l0hnjYAVyyzMAMRphXjzEPP0sNvG6EtjjHmgrwnqzksm3pOBVZR56FSu8QXd+SgDHECha2mxSn2NDyIc1dA7l0TdEYf7jm0WrqTBKs48FDohCge91IbMA91CSgIrYN821dtJz0bceSiSEE+Mfyv+fNg8EDhc+Ma5nJnAW2b3etLROMk8FFmIPw80dzuE1VE/IDS9tgrQt2mw8n8HKdVMNleOWv4jC4mKiAyson6re51UIQFWxChYm+rTJA4l3SNVSHHduU0u7r2fPbz6c/XWUVKnkuyTKqRUqT1lptdpqlUSEWKPNCECq4n3+A1cWjprrKQKEVgpLt/PZpuXzhorqULU9do1xcWnUX+HJkVo2D5paMl2LK69sZC4ETvt9eOMnHaE49q/MBn5F/XtRFGQSNloAAAAAElFTkSuQmCC"><br/>
                    <h4>Lorem Ipsum</h4>
                    <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                </div>
                <div class="col-md-6 col-xs-12">
                    <img class="icon icons8-Individual-Server" width="48" height="48"
                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADmUlEQVRoQ+1ZXUhTURz/nfmFaJaCtAclTTHyIZU+oF5a5AiyyCJIR9rMKyoSaC/5VNaTEKQvpuTMVTB9iDTQpylpDwV9kEIZhKWiD5qwzLSa2k7cmYK6e88526422F7GOP+P3+//8TvcXYIA/5AAx48gga3uYLADAdGB7DzJQAhtBSFJmwKY0lFKSVFPu6WPlY9rhIz5xSObBn4FMaWj9raWZP8QMEmUFUiLc7vNwiww08A9Pjo80wIgKyZ14RhrjJgEjucX5+oI6WAl0+LcRenZ3raWTrXYTALZJqmGADdEAO6MWkLZgR9IiVtyu312hKLpzTZMzYeKhAEFbvbYLDU+ETDmF1tByCXezDL4xhwHoiPWrs2ck6C8O06MBKUP7G0tZh8JSH0gOMpLoMYwgyOJTo/mL8YjUNO3gzcUQNFvb7MYfCQgJqEdF74iKtyzaE3O6VDYES9AgC2lzB0wCkqoGoGpOR0KRAgAYEmpKgGjqSQToO/4Swb4dYTciUmW3dY8oIRBlYA3d4C8xE2nHBvGaH6BoKxLcIkBsO4CdQJeSKhcKZlE+cE5pMQuLsvotzA0vo4WU6B/JWdJqSYEREaOZesTAWO+mISywHh1zpBSxhJL8gJniiSOS0hDYvohxMQnIiY+we06Oz2B2elxjA+9gmPik0g42XbAbrNkebXEIhIaGhGJDGMB9KkZqgAnhwcxaH+EJecvbiJqUqrYAUOeOSlMFzrCk0UGf/h85WrFWT5yR14+rucmsehaSu5rt456iqtIQERC958uhT5lHwv3mnO5E2+77nH5qEmpIgGj6bIZ0LXyZMipbOAx22DTXV/B6ecqstvuW8U6IHAHaE1ATUqVR8gkdRLgDGeJNDWjwNMemyVXqAP/xR2wgljlLlDZga15kFdqpZKUKhI4cbGUulx/NB0N3uDh4eHott71iFWRQMWtO3T0yzAWFhZ482hiJ4NP2p2KhutXxQhU11tWH6uePLRoAu5cocQdt7ZSChLgrhav4aZ34KNtean3mkLc377+Xk/AqR/Cz7Re0DAnoj6cRMRk+mot/DJCvgJe77+egCP7NlyRM27QId/1iH1+JYAJzOoR2x9gBNwjtEceod+Iep/jvxHiXUot7YR34Fpd8wwhZLuWoLhjU4zVVkke3w4p3sTVdc0GgFhBsIs7kRaGFGMANddWlXh83cT8a1ELTP6MGSTgz2p6EyvYAW+q5k+fgO/AXzLWqEC+AlzUAAAAAElFTkSuQmCC">
                    <h4>Lorem Ipsum</h4>
                    <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 dark">
            <h1 class="text-center">Lorem IpsumLorem Ipsum</h1>
            <p class="contact-text">Lorem IpsumLorem IpsumLorem IpsumLorem Ipsum <a href="mailto: kontakt@it-juwig.de">kontakt@it-juwig.de</a>Lorem IpsumLorem IpsumLorem Ipsum
            </p>
 
            <div id="success"></div>
 
            <form id="form">
                <div id="error"></div>
                <div class="form-group">
                    <input type="text" name="name" id="name" class="form-control" placeholder="Vorname"
                          autocomplete="off" required/>
                </div>
                <div class="form-group">
                    <input type="email" name="email" id="email" class="form-control" placeholder="Email"
                          autocomplete="off" required/>
                </div>
                <div class="form-group">
                    <label for="message">Nachricht</label>
                    <textarea class="form-control" id="message" rows="7" required></textarea>
                </div>
                <a class="button center-block" style="background: transparent; max-width: 128px;"
                  onclick="formRequest()">Absenden</a>
            </form>
        </div>
    </div>
</section>