Falta o visível - * * e escondido - * * no Bootstrap v4

Infelizmente todas as classes hidden-*-up e hidden-*-down foram removidas do Bootstrap (a partir da versão Bootstrap 4 Beta , na versão 4 Alfa e na versão 3 estas classes ainda existiam).

Em vez disso, devem ser utilizadas novas classes d-*, Como mencionado aqui: https://getbootstrap.com/docs/4.0/migration/#utilities

Você pode querer restaurar os antigos estilos "escondidos - *" conhecidos do Bootsrap 3 com este CSS:

/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/

/* Breakpoint XS */
@media (max-width: 575px)
{
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, 
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    }

}

/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, 
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
    .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint XL */
@media (min-width: 1200px)
{
    .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
    {
        display: none !important;
    } 
}

As classes hidden-unless-* não foram incluídas no Bootstrap 3, mas também são úteis e devem ser auto-explicativas.

O Bootstrap v4.1 usa novos nomes de classes para esconder colunas no seu sistema de grelha.

Para esconder as colunas dependendo da largura do ecrã, use d-none A classe ou qualquer uma das classes d-{sm,md,lg,xl}-none. Para mostrar as colunas em certos tamanhos de ecrã, combine as classes acima mencionadas com as classes d-block ou d-{sm,md,lg,xl}-block.

Os exemplos são:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Mais destes aqui .

Http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Agora você tem que definir o tamanho do que está sendo escondido como assim

.hidden-xs-down

Irá esconder qualquer coisa de xs e menores, apenas xs

.hidden-xs-up

Vai esconder tudo

Eu também acho que você pode substituir .visible-sm-block por .hidden-xs-down e .hidden-md-up (ou .hidden-sm-down e .hidden-lg-up para agir nas mesmas consultas de mídia).

hidden-sm-up compila em:

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

.hidden-sm-down e .hidden-lg-up compila em:

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

Ambas as situações devem agir da mesma forma.

A tua situação torna-se diferente quando tentas substituir .visible-sm-block e .visible-lg-block. Bootstrap v4 docs dizer-lhe:

Estas aulas não tentam para acomodar casos menos comuns em que um a visibilidade do elemento não pode ser expressa como um único alcance contíguo dos tamanhos de ponto de paragem do viewport; em alternativa, terá de usar CSS personalizados nesses casos.

.visible-sm-and-lg {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}

Eu penso que é uma idéia melhor restaurar a mistura velha de bootstrap, porque está cobrindo todos os pontos de paragem que podem ser definidos individualmente pelo Usuário.

Aqui está o código:

// Restore Bootstrap 3 "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-only{
    @include media-breakpoint-only($bp){
      display:none !important;
    }
  }
}

No meu caso, inseri esta parte num ficheiro _custom.scss que está incluído neste ponto no bootstrap.scss:

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above
@import "print";
@import "reboot";
[..]

Infelizmente, estas novas classes de bootstrap 4 não funcionam como as antigas num div usando {[[0]} à medida que configuram o div visível para block que começa visível em vez de escondido e se adicionar um div extra à volta da funcionalidade collapse já não funciona.