d-sm-none работает правильно. У вас есть это в теге img, и поэтому в точках останова, упомянутых в документации по загрузке, вы можете увидеть, что точка останова sm на самом деле предназначена для телефонов с горизонтальной ориентацией и, как таковая, будет скрывать только img от 576px до 768px. Если вы пытались нацелить это на обычную вертикальную ориентацию на телефоне, вы можете заменить там, где у вас d-sm-none d-md-block , и заменить его на .d-none. d-sm-block вот так:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
<div class="card">
<img class="card-img-top d-none d-sm-block" src="img/1.jpg" alt="Palme">
<div class="card-body">
<h5 class="card-title">Palme</h5>
<p class="card-text">
City: Dubai Zip-Code 333
<br>
</p>
<p>HIDE ME</p>
<p>
Created: 1.2.2011, 05:40:00
</p>
</div>
</div>
</div>
</div>
Вы можете увидеть это здесь в инструментах разработчика, когда я установил его на 576 пикселей и вы видите, что img отображается с разделом PALME с надписью HIDE ME, который я добавил, чтобы отметить карту, у вас есть img, который вы хотите скрыть. 
А затем здесь, когда мы go до 575 пикселей, вы можете увидеть, что он исчезает, как и предполагалось: 
Что касается вашей проблемы с столбцом div, я не уверен, что понимаю, что вы спрашиваете, но я делаю посмотрите, что не так с вашим кодом. В bootstrap у вас должен быть класс контейнер , который вы делаете, а затем внутри идет строка (в каждой строке 12 столбцов). После того, как строка заполнена, вы должны создать другую строку для размещения вашего контента, в которой снова может содержаться до 12 столбцов. В настоящее время у вас есть код - это 1 строка внутри контейнера, а затем ваши карты, на всех которых есть столбец 12. Ниже приведена демонстрация того, что, как я полагаю, вы пытались сделать, а именно, чтобы карты занимали весь экран от маленького экрана до тех пор, пока вы не захотите, чтобы они занимали половину экрана, что я вижу, когда вы помещаете col-md-6 . Я сделал демонстрацию, удалив классы гибкости, а также убрав ширину карты, которую вы установили как 18rem. Теперь он охватывает весь экран, поскольку я также добавил в col-xs-12, чтобы он был полноэкранным на телефонах с вертикальной ориентацией, так как наименьшее значение, которое у вас было на ваших картах, было col-sm-12, которое, как я сказал выше, является только шириной в альбомной ориентации. для телефонов.
Демо: https://jsfiddle.net/atcvmqLx/
Пояснение: вы увидите, что, хотя изображения не прикреплены, сами карты расширяются до полноэкранного режима, пока попадает в точку останова col-md-6 @ 768px.
Дайте мне знать, если у вас есть какие-либо вопросы!