当使用<source>-元素时，你需要使用属性srcset。它的用法是为不同的视口使用不同的图像，其中图像可以保持其固有的高度和宽度值，例如避免累积布局偏移。
尽管<source>-元素实际上不应该只与srcset-属性中的一个图像一起使用，但您可以通过使用srcset而不是src来保留HTML标记：

@media only screen and (min-width: 768px) {
  img {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
}

@media only screen and (max-width: 767px) {
  img {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
}

<picture>
  <source 
    srcset="https://picsum.photos/200"
    media="(max-width: 767px)"
  />
  <img 
    src="https://cdn.pixabay.com/photo/2015/03/17/02/01/cubes-677092__480.png"
  />
</picture>

我认为最简单的解决办法是：

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
   <picture>
      <img src="loginformpic_sm_xs.jpg" id="loginPicXs" class="img-responsive">
      <img src="loginformpic.jpg" class="img-responsive">
   </picture>
</div>

这使得两个图像在768px的断点处交换

@media screen and (min-width:768px) {
   /*your container*/ img:nth-child(1) {
      display:none;   
   }
}
@media screen and (max-width:768px) {
   /*your container*/ img:nth-child(2) {
      display:none;
   }
}

根据HTML规范，picture只能包含一个img元素，虽然可以隐藏一个，但不建议隐藏。
https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
您需要使用两个img元素：一个用于台式机，一个用于移动的。
当视口宽度大于768px时隐藏移动的版本，当视口宽度小于768px时隐藏桌面版本。

@media only screen and (min-width: 768px) {
  #pc-image {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
  #mobile-image {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  #pc-image {
    display: none
  }
  #mobile-image {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
}

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
  <img src="loginformpic.jpg" class="img-responsive" id="pc-image">
  <img src="loginformpic_sm_xs.jpg" class="img-responsive" id="mobile-image">
</div>

您可以使用figure代替div。
https://developer.mozilla.org/en-US/docs/Glossary/Semantics

<figure class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
  <img src="loginformpic.jpg" class="img-responsive">
  <img src="loginformpic_sm_xs.jpg" class="img-responsive">
</figure>

figure {
  margin: 0
}

@media only screen and (min-width: 768px) {
  img:last-child {
    display: none;
  }
  img:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
}

@media only screen and (max-width: 767px) {
  img:first-child {
    display: none
  }
  img:last-child {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
}